Page builder components
Familiarize yourself with the Page Builder and its components to enable you to create action pages. The different components and sections of the page builder are described in the following sections. You add and customize extra fields and buttons depending on your own requirements.
The following screenshot shows the page builder:
- Components are in the left pane.
- Builder canvas in the middle section.
- Page details and component Properties and Actions are in the right pane.
When creating a page, you can select from the following basic page layouts depending on the information you want. Each template is intended only to speed up your activity to produce the page you want.
- Detail - Page template that provides static details.
- Form - Create a page that provides static details in addition to the ability to input user data into your page.
- Table - Create a page based on the data tables loading from your target application integration.
- Static content - Set up page components that provide static, non-actionable, information such as headlines, error messages, reminders.
Page builder components
The Page Builder lets you choose from various page components that let you customize and configure your microapp output, information, and display. Use components to build a page microapp based on your expectations and needs. For example, if you want to show a list of users, you use the Table component to build it. The different template pages have different component features available by default. The following lists cover all available options that are available.
Input components - Input provides the components to create actionable sections on your page including buttons, text input, radio buttons and so on.
- Button - Add a clickable component on the page with actions and logic.
- Text Input - Define text source by specifying the data table, column, and value to load to the page. Component can be marked as optional. Field width can be modified. Validation rules can be configured based on a minimum or maximum length or text pattern to identify user input.
- Text Area - Define text source and default to load to the page. Actions can be added.
- Num. Input - Define number source, range, default, and formatting to load to the page.
- Select - Allows users to choose from a set list of values (limit is 100 values). Populated by data from the source system or you can enter the list of values manually.
- Lookup - Allows users to search though a large quantity of values and allows users to select a value by searching for something else.
- Checkbox - Add a selectable component on the page by defining source, default, actions, and logic.
- Radio - Add a set of options where only one can be selected. Populated by data from the source system or you can enter the list of values manually.
- Date/Time - Define date and time to display in the microapp, default time (the time displayed before selection), and formatting (12 hour, 24 hour, browser time) to load to the page.
Display components - Display provides the components to provide information to your end users of microapps including tables, static text, and images and so on.
- Table - Add a table by defining table source, filters, and defining columns. Page link actions can be added. Personalized queries must be set to limit data exposure. A table without a personalized query exposes all records that match a table filter regardless of the data relation to subscribers. Your potentially sensitive data may be exposed to all microapp users unless you limit data exposure. Control data access for pages using the Personalize feature. Select the table in the component builder pane. Select Table Properties and then PERSONALIZE. Select +Add Condition and add the constraints as required.
- Text - Define text source and formatting to load to the page. Actions and logic can be added.
- Static Text - Define static text to appear the page. Actions can be added.
- Static Image - Reference and display a static image from a predefined URL source.
- Image - Define image source and formatting to display on the page.
- Line Divider - Use the divider to separate unrelated and group related information.
- Back Button - Allows users to go back to previous page.
- Power BI - Displays a BI report. Define source and formatting.
- Concur Receipt Viewer - Displays a receipt image. Define source and formatting.
- Tableau - Displays a Tableau report. Define source with data table and column.
HTML Content - Use to display HTML content from pulled sources (for example RSS feeds) to display HTML correctly. Basic text elements are supported. The allowed elements are:
- “p”, “div”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “ul”, “ol”, “li”, “blockquote”, “b”, “i”, “font”, “s”, “u”, “o”, “sup”, “sub”, “ins”, “del”, “strong”, “strike”, “tt”, “code”, “big”, “small”, “br”, “span”, and “em”.
- “a” element only with attributes “target” and “href”.
- “img” element only with attributes “height”, “width”, “src”.
- Also, the “style” attribute is allowed on any element.
Layout component - Provides the grid component for setting the layout of your page.
- Flexible Grid - Gives you more control over the positioning of components on your pages. Helpful when you’re designing pages intended for devices with larger screens. Set the label and the total number of cells you want in your grid.
Page details let configure the page you are creating and setting filters for information and providing various informational debugging features:
- Page Name - Set the name of the page.
- Data Filter - Use to set constraints on the action data.
- Show SQL - Use this to display the SQL for debugging purposes.
- Show Component Logic - Use this to display the component logic for debugging purposes.
- Content to Display if Record Does Not Exist - Set the static content page to display when a record does not exist.
Each page builder component has its own specific properties menu with various options to choose from depending on the component including:
- Label - Customize the label of the button, text, image, and so on.
- Size - Set the size of the button, text, and so on.
- Style - Switch between different colors and formats for the text, button, and so on.
- Show in Blade Footer - Toggle to display the element in the page blade.
- Data Source - Select the data source for the displayed element.
- Data Table - Select the data table for the displayed element.
- Data Column - Select the data column for the displayed element.
- Conditional Formatting - Configure conditional formatting for the page element.
- Insert Variables - Add variable to the page element to automatically display application integration data.
- Display toggles - Toggle how the element displays on the page builder.
The actions menu is present for the Button component to allow the microapp recipients to respond with actionable input. Define the action that the button runs from the configured service actions that you configured in the integration.
Select the Create Logic button to open the logic configuration. This enables you to configure the logic for your particular page component. Create conditions using standard logic arguments to achieve various outcomes depending on the desired behavior of your component. You can add multiple, stacked actions to any single button to create multiple action effects with a single click. When each service action runs successfully, the system moves through the chain of actions until all are completed. Actions include:
- Evaluate Condition - Set and edit condition via a logical argument.
- Set Component Value - Set the component value for the button to commit an action.
- Show Component - Configure conditions to show the component.
- Hide Component - Configure conditions to hide the component.
- Enable Component - Configure conditions to enable the component.
- Disable Component - Configure conditions to disable the component.
- Set Component to Required - Configure conditions to require the component.
- Set Component to Not Required - Configure conditions to exclude the component.