Red Hat Summit49.4. Components
A page contains different types of components. You can use the following component types in a page:
- Core components: Used to specify custom HTML information or display existing pages. There are two types of core components.
| Core component sub-types | Description |
|---|---|
| HTML | This component opens an HTML editor widget. This can be used to create HTML pages using text, images, tables, links, colors, and so on. You can customize the page as per your requirements. |
| Page | This component allows you to add previously created pages to a new dashboard. You can use this component to nest custom pages you have already created in your dashboard. |
Core components are not mandatory.
- Navigation components: Used for navigating between pages. There are six types of navigation components.
| Navigation component sub-types | Description |
|---|---|
| Target Div | This component is used by the Tab list, Menu bar, and the Tree navigator components to display their entries and keep track of the last item clicked. |
| Menu Bar | This component displays the entries of a navigation tree in the form of a menu bar. There is no limit to the number of levels supported by Business Central. |
| Tile Navigator | This component displays the navigation group in the form of tiles. Groups are displayed as folders but for single entries, its content is displayed instead when selected. |
| Tree | This component displays the entries in a vertical tree structure format. |
| Carousel | This component displays or cycles through the selected pages like a carousel or a slide show. |
| Tab List | This component displays selected menu pages as tabs at the top of the component. |
The target div setting is not needed for non-target div components such as Carousel or Tile navigator.
Reporting components: Used for displaying data from data sets (see Data sets authoring section) in the form of graphs, tables, maps, and so on. There are ten types of reporting components. The reporting components can be configured using the New Displayer widget, which has the following three tabs:
- Type: Choose how to display custom data graphically.
- Data: Choose a data set from the list of custom data sets that you had created from the Data Sets section available in the Settings menu.
- Display: Edit and customize how the content is displayed by adding titles, changing colors, size, and so on.
49.4.1. Placing components on the page editor to create a page
To create pages, you must drag the components to the Editor canvas of the Pages perspective. After placing all of the required components on the page, click Save.
49.4.2. Using the Preview tab to preview pages
While creating or editing pages, click the Preview tab on the Page Editor to preview a page before saving it.
49.4.3. Component properties
The components used in a page have different properties associated with them. The Properties panel enables you to customize a component by editing the following properties:
- Panel properties: Used to customize component panel properties such as Width, Height, and Background Color.
- Margin properties: Used to customize component margin properties such as Top, Bottom, Left, and Right.
- Padding properties: Used to customize component padding properties such as Top, Bottom, Left, and Right.
HTML components also have additional text properties to customize component Alignment, Decoration, Color, Size, and Weight properties.
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}