Understanding the components of a page

List of parent components available in the platform. For more details refer to UI Components:

Name of the Component	Description
Action Button	Contains certain pre-defined actions such as Save, Clear, Refresh, and Delete etc. Provides 12 different actions for components with data sources. As per requirement, under Action group, select the radio button to specify a particular action. You can add triggers for the standard actions. Action button is available only after adding a card wrapper.
Aggregate Card	Displays the aggregate of data involved. You can view the count of objects in the dashboard. This component can be added to the page and Card Body.
Attachment Drop Zone	Allows the user to upload multimedia content. For example: images, videos, pdfs etc. Requires the Col parent component.
Attachment Upload	Allows the user to upload multimedia content, verify details, revise, and existing files. For example: images, videos, PDFs etc Requires the Col parent component.
Auto Breadcrumb	Displays the current path of a page relative to its starting point. Allows the users to understand their current context in a hierarchical structure and the ability to navigate up the structure easily. This component can be added only to the page.
Badge	Used as a part of a link or button to provide a counter. You can use it to emphasize on a required value. For example: Display the details of an employee from the table.
Barcode Scanner	Uses webcam to scan items and store its value in the view attribute. It can read different types of barcode. For example: Code128, Code 39, UPC etc.
Breadcrumb & Breadcrumb Items	Displays a chain of pages for easy access of one or more of the navigation path pages. Current path of a page with respect to the starting point is displayed. You can understand the current context of a page in a hierarchical structure and the ability to navigate up the structure easily. Use Breadcrumb item component to add item in Breadcrumb. This item can be used to navigate back. This component can be added only to the page.
Button	Allows to define an action, as per requirement. For example: Submit a form. Needs an On click event/ Button Actions to perform any action.
Button Dropdown	Displays buttons in a drop-down menu. Use the Button component to define an action.
Button Group	Combines both Action buttons and regular Buttons. The Action button/Button component can be used as per requirement. Used as a container for a group of buttons.
Calendar	Displays the calendar item, used to represent events. Presents the current month layout along with a scrollable navigation for year and month.
Calendar Heatmap	Displays the month layout for the current year. Visualizes values over days in a calendar-like view, making it easy to identify daily patterns or anomalies. Specify different attributes for date & count attributes
Capture Image	Captures images after a particular action. Uses the webcam connected to your device. Returns the file Id which is a part of the view attribute. Use the Trigger After/Before Upload component to perform various actions. For Example: Use the below statement to display the captured image in Image Cropper by passing the value in src property: service/aservice?fid=1234&ds=MyDatasource&attr=MyfileId&sid= ${session.sessionId}
Card Table	Uses a blank table to represent tabular data in a card form. Inherits and displays the content from the data source by adding cardTableColumn. Add paragraph component to get the view attribute.
Card Wrapper	Divides the page canvas into header and body to ease the formatting and sectioning. Is a flexible and extensible content container.
Carousel	Allows the user to add multiple card wrappers to the page. You can continue working on the card wrapper discretely. This is a slideshow component for cycling through elements. This component can be added only to the page.
Change Role	Used to query the data based on selected role. In case of multiple roles assigned to the page, use the component to change the role of the session For example: If you have data for two different countries with same pages and data sources, the data will be rendered based on the role.
Char Circle	Displays the first character of the text inside a coloured circle. Lists the component to differentiate between records. Requires the Col parent component.
Chart	Supports graphical representation of data, as symbols. Example: bar chart, line chart, or pie chart. Represents tabular numeric data, functions, or some kinds of qualitative structure that provides different information. The platform supports 10 different types of charts for graphical display of data.
CheckBox	Allows the user to make multiple choices, broadly used in forms and surveys. Requires the FormSearch parent component.
Collaboration	Works like a comment box, for comments or reviews on any record along with context value and type. Encourages collaboration within users of the application.
Combination Chart	Allows you to plot multiple datasets and chart types on the same chart. The chart can be rendered in either 2D or 3D, single or dual y-axes, and can be stacked or multi series in nature. For example: you can show the column, line, and area chart on the same chart canvas. Use DataList to create multi-row cards with data.
Datalist	Renders records as the list inside row/column. Used to design interactive cards or list. You can add a Card Wrapper to this component. This component can be added only to the page.
Data store	Displays the data from the data source on the UI that is to be fetched and manipulated. Used to create an instance of the data source, by providing the data store with the data source name & alias. This component can be added only to the page. You can only define store related triggers under this component.
Div	Acts as a container unit that encapsulates other page elements and divides the HTML document into sections. The component can be added only to a Card Body.
Dragsource/Drag Target	Used as a drag wrapper. Allows to drag the content across browsers. This component can be added to the Horizontal Section, Vertical Section, or Col components.
Extra Large View	Renders components for desktop devices. The size of the layout is pre-defined, that is, greater than equal to 1200 pixels. This component can be added only to the page. Used for sectioning of the page. Components are not visible in other views, such as, small view, medium view, or large view.
Form	Acts as an input-based component, designed to collect users’ data. For example: registration, login, contact form etc. The component is same as an HTML form, containing form elements, such as, text fields, checkboxes, radio buttons, submit buttons, and many more.
FormSearch	Acts as a container for the search fields. Search fields are used to search and retrieve related information from the data source. Specify the target item Id of the component where you want to perform the search.
Fusion Chart	Renders and manipulates your charts and graphs continuously across all browsers and devices.
Gantt Chart	Plots tasks visually in a date/time-based chart. Represents the exact start and end dates/times of the tasks. A Gantt chart is a series of horizontal lines that shows the amount of work done in a certain period of time in relation to the amount of work planned in those periods. Used to define milestones for a project, keep track of the project progress and plan remedial actions to bring the project back on course, if there is a delay.
Gauges	Measures and gives a visual display of the screen Requires the Col parent component By adding the Color child component, you can associate colors with sections of the data to indicate specific ranges For example: green for satisfactory, yellow for caution, and red for alarm.
Google drive attachment dropzone	Allows the user to upload multimedia content, such as, images, videos, pdf etc. to google drive folder. Prerequisites: A Google drive service account. A p12 credentials file To upload a file: Upload the required file using custom handlers with the name subDomain-gdrive.p12. Update profile value of GDRIVE_SERVICE_ACCOUNT_ID with your service account email. Create a profile with profile code as the concatenation of string 'GDF_' and the datasource name. For example: GDF_MyDatasource, where MyDatasource is the datasource name. The profile value will be in the google drive folder ID, where you want to upload the attachment. Use the Trigger After Upload parent component to get the uploaded file details. #{props.acturl} to get the actual file URL #{props.fileId} to get the ra file ID.
Google Map and Google Navigator	Provides detailed information about geographical regions and sites in an application. Use the Google Navigator component to track an object’s current position with respect to the destination, using Google map.
Gridster Layout	Builds an intuitive draggable layout using elements spanning across multiple columns. You can also dynamically add and remove elements from the grid.
Grid Layout	Aligns the elements into columns and rows. The component uses HTML primitives for a draggable and resizable grid layout. Used to divide a page into major regions and define size, position, and layer for the elements.
Grid	Displays data in multiple rows and columns. Requires the Card Body parent component. You can add child components to customize the data displayed or accepted in each column. For example: Number column component displays/accepts only numbers. Icon column component displays/accepts icons against each row added. List of child components to design columns in a Grid: Attachment Column Calculated Number Column Calculated String Column Checkbox Column Custom Renderer Column Date Column Google Drive Attachment Column Icon Column LOV Column Number Column Progress Column Row Col Column Row Number Column Row Selection Column Select Column Slide Toggle Column String Column Switch Column Tree Column UserPic Column Wave Column
Header tags (H1-H5)	Displays selected text with different header formatting The formatting can be used for the whole page or for partial on-page content. Requires the Div parent component.
HTML	Used to create HTML (Hypertext Markup Language) tags and display pre-formatted HTML content. Requires the Div parent component.
Heatmap Chart	Uses colors to represent different types of data. For example: tracking investments in the stock market, comparing the performance of different companies, etc. The Color Range component is added along with the parent component to define colors.
Horizontal Layout	Arranges the child components in sections into a single row. Creates a panel that allows you to change the proportion of the width of each section. The Horizontal Layout Child component wraps its contents in the provided width. You can provide width as -1 to let the component take the width of the content or 1 to take 100% width.
Icon	Works similar to a Button, without a description, only a symbol is displayed. By default, the Trigger On Click component is added. Requires the Div parent component.
Icon Select	Displays a collapsible list of icons as per the data source attribute specified in the View Attribute field. Requires the Col or Form parent component.
IFrame	Acts as a blank canvas, to insert content from another source. Used as an HTML document embedded in another HTML doc on a web page. Requires the Card Body parent component.
Image	Embeds an image into the view. Displays the container for selected image Requires the Card Body parent component.
Image Cropper	Crops an image before uploading it. Requires the Card Body parent component.
Large View	Renders components for large devices. The size of the layout is pre-defined, that is, from 992 pixels to 1200 pixels. This component can be added only to the page. Used for sectioning of the page. Components are not visible in other views, such as, small view, medium view, or extra-large view.
LOV (List of Values)	Binds a list of values for a specific field in the page. Use the LOVField component. Generally, used along with the Popup component to display the list of object values or database column values, for the user to choose.
Medium View	Renders components for medium screens. The size of the layout is pre-defined, that is, ranging from 768 pixels to 992 pixels. This component can be added only to the page. Used for sectioning of the page. Components are not visible in other views, such as, small view, large view, or extra-large view.
Mirror	Renders a copy of an existing item on the same page and avoid duplicate definitions. Used to create a copy of existing page items with different views, such as, Mobile, Tablet, Desktop etc. Requires the Col parent component.
Node Graph	Allows the user to drag and drop elements in a Workflow. Requires the Card Body parent component.
Number field	Performs searches on number columns, for exact match, between and lesser/greater than etc. The component is one of the important form input elements. Requires the FormSearch parent component.
Password field	Acts as an input text field, used in a variety of components like forms, comment sections and forums. Requires the FormSearch parent component.
Page Fragment	Creates reusable components of a page, such as, form, order detail popup etc. Changes in a fragment, dynamically updates all the instances of the fragment, including those you have already added to pages. Requires the Card Body parent component.
Paragraph	Used as a header field to the page or any on-page content. Requires the Card Body parent component.
Pivot Grid	Used for data visualization, allowing the users to perform operations over multi-dimensional/ pivot data. Requires the Card Body parent component.
Popover	Displays a dialog box with a content on-hover. Activated with a click and can be easily applied to any element. The component is similar to a tooltip. Requires the Card Body parent component.
Popup	Displays the basic information of the current page, such as, contact information, address information etc. in a separate dialog box. You can view it on top of the current page as a small window. This component can be added only to the page. By default, the Vertical layout component is added.
Progress Bar	Displays an indicator showing the completion or progress of a task. Requires the Col parent component.
Pulse	Displays information to the users on hover, such as, details of functionality or list of contents, etc.
Quick Filter	Used to filter necessary data. Requires the Card Header parent component.
Radiobox	Allows the user to select a single choice from a list of options. You can specify a custom string in the names property to display each option. Requires the Form, FormSearch, or Col parent component.
Rich Text Editor	Acts as an interface for editing text within browsers. Presents the content with a (WYSIWYG) editing area. Requires the Card Body parent component.
Row/Col	Used as the basic building blocks for responsive layouts. Use Rows to create horizontal groups of columns. Use Cols to create vertical groups of a row. The component can be added only to a Card Body.
Saved Search Menu	Allows the user to configure data grids by re-arranging the column display order, resizing the column widths, hiding few columns etc for future use. Requires the Card Header, Card Footer, or Col parent components.
Scroll Layout	Creates a panel to wrap the contents in a scrollable area. You need to specify the value of length to display contents at a time. This component can be added only to the page.
Select	Displays a collapsible list of multiple values on click. Generally used in forms, menus, or surveys. You need to specify the data source attribute that needs to be displayed in the dropdown. Requires the Card Table or Form parent component.
Show Item	Used to select/display another UI item from the current page. Requires the Trigger on Click parent component. Uses the item Id of the UI item. Similarly, in order to hide any UI item, use Hide Item action.
Show Message	Displays a popup message with some text. Requires the Trigger on Click parent component. Used to display a message after some action. For example: Confirmation message after the successful submission of a form. This component is used only to display a message.
Show Popup	Displays a popup window with a message. Requires the Trigger on Click parent component. Uses the item Id to define an action.
Side Tab Panel and Side Tab Item	Acts as a container that includes tabs in it. Can be displayed in it in top, or toggle left and right. Used to define a navigation pane. You can add the Side Tab Item component to specify multiple tabs. For example: Display the user’s profile or the list of users. This component can be added only to the page.
Signature Pad	Accept user’s signature and displays it. Requires the Col parent component.
Slide Toggle	Used to activate one of the two predefined options, commonly used as an on/off button. Requires the Card Header parent component.
Slider	Used to select ranges between two or more values based on the number of handles added in the component. Requires the Card Body parent component. Add the Handle component to save the range in the selected attribute.
Small View	Renders components for small screens. The size of the layout is pre-defined, that is, less than 768 pixels. This component can be added only to the page. Used for sectioning of the page. Components are not visible in other views, such as, medium view, large view, or extra-large view.
Smart Search	Creates a search bar along with the parent component added. You can search for the attributes added in the provided data source. Requires the Card Body parent component.
Star Rating	Allows the user to specify rating in terms of stars, usually, in a scale of 1 to 5, the highest number of stars indicating the best quality. Requires the Col parent component.
Switch	Evaluates an expression depending on its value. The value of each expression is compared with the values of each case. Cases are the possible outputs of the evaluated switch expression. The Case component is added along with this component. These components can be used to render the children of a matching case. Only the children of the case which is equal to the evaluated expression from the switch, will be rendered. Requires the Card Body parent component.
Tab Panel and Tab Item	Separates content placed in the same wrapper into separate panes. Used to categorize and store content. By default, the Tab Item component is added. According to the bootstrap customizations, you can change the color and add animations to differentiate between the tabs. This component can be added only to the page.
Table	Represents data in a tabular format. Data is presented in a two-dimensional table comprising of rows and columns. Requires the Card Body parent component.
Text Field	Acts as a user-input component. Can be used with a variety of components, such as, form, comment box, forum etc.
Thumbnail	Displays the thumbnail of a selected image. Linked images in grids or circular formats with markup can be displayed. Requires the Col parent component.
Timeline	Displays the list of events in a chronological order. It is a graphic design of a bar labelled with dates along with associated events. Requires the Card Body parent component.
Transaction	Groups multiple datastores into a single transaction. Defines the parent-child relationship between data sources, using the Mapping component. Changes posted in the Save Transaction action, are updated in the datastores included in the transaction. If one data source fails, then all changes within this transaction will be rolled back. For example: Consider two data sources, Dept (Dept ID, Dept Name) & Emp (Emp ID, Emp Name & Emp Dept ID). Dept ID & Emp ID are auto generated on the server only after saving the transaction. When you create a new department and employee at the same time and save the transaction, the platform will first create the department which would generate a Dept ID for the newly created department and then copy the Dept ID from the Dept data source record into Emp Dept ID attribute of Emp data source record before saving the Emp data source. This component can be added only to the page.
UIView	Allows the user to render other pages of the application, when loaded. You can use it in an abstract page to embed child pages into a parent container. Requires the Card Body or Col parent component.
User Picture	Displays the profile picture of the logged-in user. Requires the Card Table or Col parent component.
Video	Provides a video in the page. Requires the Col parent component.
Video Recorder	Records a video using the device’s webcam or external webcam. You can also use to play the recorded videos. Requires the Card Body parent component.
Vertical Layout Panel	Arranges the child components one below the other in a single column. Creates a panel that allows you to change the proportion of the height of each section. The Vertical Layout Child component wraps its contents in the provided height. You can provide height as -1 to let the component take the height of the content or 1 to take 100% height.
Watch	Specifies an expression to watch the changes. When the value of the expression outcome changes, the Trigger On Change component is fired. This component can be added only to the page.
Wave	Consists of three dots, representing that the data is being loaded. Requires the Card Header parent component.
Wizard Steps	Displays react components stepwise, such as, data forms, text, or html components etc. Generally, used to show progress of a task or process to the user. Requires the Col parent component.
XY Chart	Provides a graphical representation of data, using X-axis and Y-axis. Requires the Card Body parent component.