Challenge #10: Look and feel

Challenge #10

Modifying the look and feel of embedded canvas apps can be a bit of a challenge. They stand out (too much?) or do not feel as if they belong to the host model-driven form. While this is sometimes good, it isn’t an ideal embedment in every case. For example, when you start creating an embedded canvas app, the default layout is 444 x 790 as shown below.

This looks pretty decent. But within a model-driven form, this default setup makes the app look really bad.

As you can see, this is pretty bad. The look and feel of embedded canvas apps needs special attention.

Trick #10

While there is no predefined set of rules that can be followed to make embedded canvas apps have a good look and feel, there are certain guidelines that can help. There are certain attributes that can be used to control the look and feel of an embedded canvas app.

• One of the most important ones is the ability to resize embedded canvas apps. The orientation and screen size can be controlled using either the predefined values for screen sizes or by setting the size to “custom” and then defining the width and height. When the size is set to “custom,” the orientation is not available as an option since the orientation is decided by the custom width and height.
  • If the embedded app is by itself on a tab, it is best to use the 16:9 Default) layout, at least to start off with.
  • If the embedded app is on a tab alongside sub-grids, a smaller mobile like screen size would work much better.
• Adjust the font size, color, and weight in the embedded app using the values from the model-driven form. To find out the font details of the model-driven form, copy any label from the model-driven form and paste it in a Word document. However, note that the font might have to be reduced even further so the text within the embedded app doesn't look bigger than the headers of the host form.
• Remove or modify certain default properties of controls to be in line with how controls work in a model-driven form. For example, certain controls have a hover color that may not go well with the rest of the controls of the host form. Similarly, a gallery doesn't have a TemplateFill or Transition defined by default. Modifying these values can have a significant impact.
• Adding a border to the entire screen of the app gives it a well defined look. However, the right and bottom sides of the border get cropped out. So if the screen dimensions are 1366 by 768, set the gallery dimensions (assuming the gallery covers the entire screen) to 1364 by 766 with the X and Y position values set to 0 and 0.
• Changing the color theme of the app is yet another crucial factor. Changing the color theme of any canvas app can be a bit of a challenge if you don't want to select the out-of-the-box themes. However, I would strongly suggest to take the time and modify the appropriate color properties of all controls.
• Another idea is to place the buttons like Save, Save & Close in accordance with how the buttons are placed in the host form. This keeps the user experience consistent. Also, if the buttons are at the bottom of the embedded app's screen, the user might have to scroll to get to those buttons.

Taking our example and incorporating some of these suggestions, the embedded app looks like this.

Have fun! Get addicted!