Building responsive, consistent and reusable apps in your organization - Part 2 : The App
The goal of this series is to build a reference app that demonstrates possible design patterns to help us make applications that are structured, predictable, and maintainable.
See Building responsive, consistent and reusable apps Part 1 : Components for the first part.
Add a Footer Component
Following the same approach from the first part of this series, I created a Footer Component. I will not go into details since this was described in the first part, so I will leave it to you as a challenge.
Hints:
Import the Library
I’ll create a simple app from the contact table. Starting from my solution screen, I will add a canvas app.
I enable the experimental features in the App Settings panel (this may require a save, refresh to take effect):
Then I’ll bring in my components from the library.
From the insert panel, click on “Get more components” at the bottom.
On the right-hand side, I select all components from my library and click Import.
Now on my insert menu, I see a new heading “Library Components”
To help make this responsive, I will lay these out in a vertical container, making sure I use dynamic height and width (see my first article). I also add a Horizontal container in between for the body of my screen.
I set the container alignment to Stretch.
I find this doesn’t always immediately adjust he component’s width, so reordering the component in the tree view will reset it.
Create the Contact Screen
In the body container, I add a gallery and an Edit form, binding both to the Contact table in Dataverse.
I adjust the fields on both (removing last name to meet this board’s PII requirements). I also remove the arrow in the gallery.
I set the Form.Item property to ContactGallery.Selected so that as I select items in the gallery, the form will display it.
To help make the form able to deal with readonly, edit and create modes, I will add a context variable to the screen. I’ll also add a StatusText to help with some usability hints on the app.
In the ContactScreen.OnVisible I add:
UpdateContext({EditMode: FormMode.View, StatusText: ""});
I update the ContactForm.DefaultMode to “Item”. I also set the ContactFooter.StatusText property to “StatusText”.
Now I’ll update the Header’s properties as follow to connect the dots:
Show Add | EditMode = FormMode.View |
Show Edit | !IsBlank(ContactGallery.Selected) && EditMode = FormMode.View |
Show Delete | !IsBlank(ContactGallery.Selected) && EditMode = FormMode.View |
Show Submit | EditMode <> FormMode.View |
Show Cancel | EditMode <> FormMode.View |
Show Back | false |
Essentially, Add, Edit and Delete buttons only show when in view mode, and the submit and cancel buttons only show when in edit mode. I hide the back button since I’m only have 1 screen.
Now for the button events.
OnAdd | NewForm(ContactForm);
UpdateContext({EditMode: FormMode.New, StatusText: "Adding new contact"}); |
OnEdit | UpdateContext({EditMode: FormMode.Edit, StatusText: "Editing contact " & ContactGallery.Selected.'Full Name'}); |
OnDelete | Remove(Contacts,ContactGallery.Selected);
UpdateContext({StatusText: "Deleted " & ContactGallery.Selected.'Full Name', EditMode: FormMode.View}); |
OnSubmit | SubmitForm(ContactForm);
UpdateContext({EditMode: FormMode.View}); |
OnCancel | ResetForm(ContactForm);
UpdateContext({StatusText: "Cancelled", EditMode: FormMode.View}); |
These actions will update the mode of the form, set the initial state of the data in the form, and update the database as required. I also update the status in the footer to provide some feedback to the user.
I also set the ContactHeader.Title to “Contacts” and the ContactFooter.Caption to “Contact App”. My goal here is to have a different title on each screen and the footer display the name of the app.
Last touch, set ContactGallery.OnSelect to UpdateContext({StatusText: ""}) to clear the message.
Color Theme
Currently, theming support is limited to something totally custom, or the built-in theme. For my purpose I will use the built-in themes but keep in mind the following:
- There is no way to create or change themes
- If you alter the style of a component, it will forever lose its connection to the theme. You need to re-add it.
My approach is to add a hidden page to manage the theme. Some people I speak to use components for this, or an Excel sheet, or a static collection they paste into the App.Start. These are all great work arounds.
I add a _SettingsScreen, and I add a Button and a Text Input. I call them “StyleReferenceButton” and “StyleReferenceInput”.
Now I set my header and footer properties as follows:
Fill | StyleReferenceButton.Fill |
Color | StyleReferenceButton.Color |
Now when I switch my theme, everything looks great.
Next Steps
I hope you have enjoyed this article. In the final one, I will polish up the responsive features of the app and test it on my phone. Please let me know if there is any other topics you are interested in learning about.
Until next time!
*This post is locked for comments