Best Practices - Displaying Dynamic Data (9 min)
Completion requirements
01 Getting Started
This tutorial covers best practices for displaying dynamic data. including:
- Why dynamic data can be problematic.
- The autofit dynamic container.
- The form dynamic container.
- Auto width and auto height size properties.
- Combining dynamic data containers with auto-sizing.
02 Dynamic Data
The Titan platform is integrated seamlessly with Salesforce. You can insert dynamic data into your form fields to ensure the latest Salesforce data is always displayed. It can sometimes be difficult to determine the extent of the data you will be pulling from Salesforce.
03 Autofit Container
The autofit container dynamically resizes depending on the data displayed.
To display how autofit containers can be used, we have created two columns with the same elements. One column contains elements that have been inserted freely, in the other column the elements were inserted into an autofit container. An on-click action was assigned to each of the buttons labeled Hide. When the user clicks the button. The email field will be hidden.
In preview mode, the button was clicked for each column. The side that had the elements freely added displays a space. The autofit container is dynamically adjusted.
To display how autofit containers can be used, we have created two columns with the same elements. One column contains elements that have been inserted freely, in the other column the elements were inserted into an autofit container. An on-click action was assigned to each of the buttons labeled Hide. When the user clicks the button. The email field will be hidden.
In preview mode, the button was clicked for each column. The side that had the elements freely added displays a space. The autofit container is dynamically adjusted.
04 Forms
The form is a flexible container that auto-resizes depending on the dynamic data. The form is divided into columns and rows.
To display how the form element can assist you in displaying dynamic data. The strip was divided into two columns, and the same elements were inserted into both columns. In one of the columns, the elements were inserted into a form. Two buttons were inserted into each column with an on-click action. The first button hides the email field only and the second hides both the email and number fields.
In preview mode, the first button was clicked to hide the email fields. Both columns look the same. The form row will not contract if it still contains content.
When the second button is clicked, both the email and number field is hidden. The column without the form element displays white space but the form auto-contracts that row and the elements are adjusted.
To display how the form element can assist you in displaying dynamic data. The strip was divided into two columns, and the same elements were inserted into both columns. In one of the columns, the elements were inserted into a form. Two buttons were inserted into each column with an on-click action. The first button hides the email field only and the second hides both the email and number fields.
In preview mode, the first button was clicked to hide the email fields. Both columns look the same. The form row will not contract if it still contains content.
When the second button is clicked, both the email and number field is hidden. The column without the form element displays white space but the form auto-contracts that row and the elements are adjusted.
05 Auto Width and Auto Height
In the styling menu, there are auto-sizing options under Advanced.
For example, the auto-width setting.
To display how the auto-resize width feature can assist your content design, the same title element was inserted into two columns. The one has a set width applied and the other has auto resize with applied. An on-click action to retrieve Salefsorce data was assigned to the button.
In preview mode, when the button is clicked the is displayed. On the left side, the content displays over two lines of text as the width is set. The content on the right is auto-adjusted to fit the content on one line.
The Auto-resize Height property applies just like the auto with. This ensures the content will not be cut off nor bleed over other elements.
To display how the auto-resize width feature can assist your content design, the same title element was inserted into two columns. The one has a set width applied and the other has auto resize with applied. An on-click action to retrieve Salefsorce data was assigned to the button.
In preview mode, when the button is clicked the is displayed. On the left side, the content displays over two lines of text as the width is set. The content on the right is auto-adjusted to fit the content on one line.
The Auto-resize Height property applies just like the auto with. This ensures the content will not be cut off nor bleed over other elements.
06 Combining Auto Resize with Autofit Containers
These auto-resizing features should always be used in combination with each other.
For demonstrative purposes, the same elements were inserted into two columns. The elements on the right side were freely inserted and a width was set. The left-hand side elements were inserted into an autofit container and the auto-resize styles were applied. When the data is retrieved, the column with the auto-resize functionality displays correctly. In the other column, the content bleeds over other elements as the width is set.
For demonstrative purposes, the same elements were inserted into two columns. The elements on the right side were freely inserted and a width was set. The left-hand side elements were inserted into an autofit container and the auto-resize styles were applied. When the data is retrieved, the column with the auto-resize functionality displays correctly. In the other column, the content bleeds over other elements as the width is set.