Generic Components
  • 11 Aug 2022
  • 4 Minutes to read
  • Contributors
  • Dark
  • PDF

Generic Components

  • Dark
  • PDF

Article summary

The Generic components comprises of the Topbar/Header, Footer, Heading, Text, Search, Button and Link. They are generic because they do not have any specific functionality and are used only for representing the data or redirecting the data to a different section or page. All generic components(except Topbar and Footer) do not have any child components inside them.


It is placed as a Page Header on the top of the page. It is used to represent the title of the page. On double-clicking the header text, the text properties can also be edited.


The following properties can be edited:

  1. For the Topbar: ID, Interactions, Tooltip, Style, Layout
  2. For the Header Text: ID(Add Variable), Title, Type, Interactions, Tooltip, Text, Style, Layout
Other components like Panel (Layout component section) cannot be added if a Topbar component is already present on the page.
If multiple actions are required to be performed within the Topbar, it can be partitioned using the Grid component and other components can be included in the Header itself. 
Topbar ThumbnailTopbar on CanvasTopbar PropertiesTopbar Text Properties
topbar.pngnew header.PNGI-topbar-propertiesI-topbar-textproperties

Once a Footer is dragged and dropped, it appears at the bottom of the page. Similar to the Header component, the footer text can be edited by double-clicking the text 'Footer'. 


The following properties can be edited:

Footer ThumbnailFooter on CanvasFooter PropertiesFooter Text Properties
footer.pngnew footer.PNGI-FooterpropertiesI-Footertextproperties

There can only be one Header and Footer per page. Multiple headers and footers cannot be added.
Other components like Bottom Bar cannot be added if a Footer is already present on the Page. If the Footer is expected to include multiple components, then it can be partitioned using the Grid component. 


It is used to provide a Title or Heading to a page in different levels. The heading property allows a maximum of 6 levels of headings. The user can click the heading component to edit the Heading text. 


Headings have the following properties:

Heading Thumbnail Heading on CanvasHeading Properties


This component provides a text space for the user to enter data when dragged and dropped into the canvas. It is used to assign a label to a particular component in the canvas. The text(label) value can be assigned dynamically by mapping a variable to its Title property. The Text component can be added within other components like the Grid, Table, etc. 


Label component has the following properties:

Text ThumbnailText on CanvasText Properties
TextComponent-iconnew text label.PNGI-Textproperties

This component provides a search bar when it is dragged and dropped into the canvas area. It is used to search for a particular data within the App.


The search bar properties are listed below. It has a Data Property that enables users to dynamically populate data through variables from the backend. The variables can be mapped to the corresponding search bar that can be available from the UI during runtime. 

Search ThumbnailSearch on CanvasSearch Properties
search component.pngnew search.PNGSearch-Updated-11july

You can search only for specific data that is within the scope for which the App is designed for. The search bar cannot be used to perform any general search unless it is programmed in the backend for the same.


Buttons are used for redirecting a page or performing a specific action when it is clicked. Icons can be added to buttons depending upon their functionality. 

The button component is a very dynamic component that can be added multiple times within a page as per requirement. It can also be added within other components. By default, the button appears on the top of the page when dragged and dropped. Its position can be changed within the page by dragging it to a specific point or through custom CSS in the Style property. 


Button: ID(Add Variable), Title, Icon picker, Position Select, Enabled, Link To (Link To Data Source), Interactions, Tooltip, Text, Style, Layout.

Button ThumbnailButton on CanvasButton Properties
button.pngnew button.PNGButton_updated-11July

The Link component is used to redirect a page to another page, document or URL by specifying a particular link.


For files within the drive, the filepath is mapped to the Link component. External URLs can also be mapped to the Link component, but they have to be enabled during Container App generation


Link: ID(Add Variable), Title, Enabled, Link To (Link To Data Source), Interactions, Tooltip, Text, Style, Layout

Link ThumbnailLink on CanvasLink Properties
link.pngnew link.PNGLink_updated-11July


The Progress bar component is used to show the progress of an event happening in the background. For example: updating files or loading data. It has the following unique properties in addition to the other component properties:


  • If set to 'True' the progress bar is closed automatically after the event completes
  • If set to 'False' the progress bar does not autoclose
  • Variable - Linked to a variable whose value (True/False) determines the autoclose action at runtime


Denotes the status of the progress. Includes the following default statuses:

  • 'inprogress' - displayed in blue
  • 'failed' - displayed in red
  • 'completed' - displayed in green
  • Variable - custom status can be added here


Depicts the percentage(%) of the progress. Linked to a variable to display the percentage at various levels of progress.


Progress Bar: ID, Title, Show, Autoclose, Status, Progress, Interactions, Tooltip, Text, Style, Layout

Progress Bar ThumbnailProgress Bar on CanvasProgress Bar Properties

Refer to Glossary to view all the properties with their explanations in detail.

Was this article helpful?


Eddy, a generative AI, facilitating knowledge discovery through conversational intelligence