cancel
Showing results for 
Search instead for 
Did you mean: 
Carlosr

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:

 

Spoiler
Carlosr_0-1630602220932.pngCarlosr_1-1630602220935.png

 

Import the Library

I’ll create a simple app from the contact table.  Starting from my solution screen, I will add a canvas app.

Carlosr_2-1630602220941.png

 

I enable the experimental features in the App Settings panel (this may require a save, refresh to take effect):

Carlosr_3-1630602220945.png

 

Then I’ll bring in my components from the library. 

Carlosr_4-1630602220948.png

 

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.

Carlosr_5-1630602220954.png

 

 

Now on my insert menu, I see a new heading “Library Components”

Carlosr_6-1630602220957.png

 

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.

Carlosr_7-1630602220961.png

 

I set the container alignment to Stretch.

Carlosr_8-1630602220964.png

 

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.

Carlosr_13-1630602326157.png

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.

Carlosr_10-1630602221007.png

 

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”.

Carlosr_11-1630602221013.png

 

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.

Carlosr_12-1630602221022.png

 

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!