Improve data density with High-Density Headers in model-driven apps.

Hello everyone,

I wanted to share with you some thoughts on how to improve the overall productivity of your forms by moving from the “low-density” header to a high-density header in a model-driven app.  If this is something you’ve already done, then you know how the high-density headers can really help users understand the data they are working with on a model-driven form. This is important because the fields in the header represent the most important information a user needs to see to help them understand what information is on a form and what data a user will be working with.

For forms over data (main forms) in model driven app we include some basic information that identifies the table and the record the user is working on in the form header.  We also include information on the data if it is in a read-only state and we include notifications that you, as a maker, can define and errors that occur while working with data including data types (added a text where it should be numeric) or required fields.

In this example the form has a  high-density header with the four fields that are essential for a user to quickly scan and does not need to edit or need additional fields beyond what is included on the header.   To achieve this, you can set the form header in the designer to high-density and remove the option to show the flyout.  This helps the user stay on task without distractions or unnecessary clicks in the header.

Form Runtime:

Form Designer Settings:

If you need to have more than four fields or need to have users edit the fields in your form header you will need to make sure you use the high-density with flyout option.   This can be easily set in the modern form designer.  When this flag is set a small chevron will show in the right, like how low-density header worked but, in this mode, all the fields in the header will be available for a user to interact with including the four read-only fields that are rendered on the form.

Form Runtime:

Form Designer Settings:

In the example below you can see how data reflows in a high-density header and how information always wraps and is never truncated. This is vital for user to be able to always see important information especially when dealing with long table or record titles on a form.

IMPORTANT CHANGES – Removing low-density headers.

It is also very important to know that low-density headers will be deprecated in October 2021 with Release Wave 2.  What that means is if you have not moved to a high-density header, with or without flyout, the platform will automatically change this at runtime.  To ensure data entry is still available the runtime will set all low-density headers to high-density with flyout.

We are making this change because:

• Most makers building model-driven apps have moved away from low-density headers and usage is very low.
• Low-density headers don’t promote a highly dense experience and require users to always use the chevron for all fields across view-port sizes (small to very-wide). Data becomes hidden and requires extra clicks to interact with information on the header.

Moving away from low-density forms will really improve the usability and the data density of your form and will move you down the path of creating and building highly productive forms.

Read more about how to build high performant main forms in model-driven apps.