# Introduction Welcome to the Zingy Documentation Portal Use the navigation sidebar on the left (or the **☰** menu for mobile devices) to directly access any section. Additionally, you can use our AI-driven search feature located at the top right corner. Below are some quick links to important sections of the documentation: ### Dashboard


Manage your Apps	Apps
Billing - Payment Methods	Billing - Payment Methods

### App Editor


App Editor Tour	App Editor Tour
App Settings	App Settings
Manage Pages and Forms	Pages and Forms
Role based authentication	App Users

### Page Editor


Page Editor tour	Page Editor Tour
Adding content to pages	Adding Page Content
Working with Page Elements	Working with Page Elements
Use AI to design Pages	Using AI Wiz in the Page Editor
Page Element Library	Built-in elements
Page Settings	Page Settings

### Forms


Forms demonstration video	https://www.youtube.com/watch?si=uvE6f7ZAmged4urW&v=dmiyhGt75Oc&feature=youtu.be
Working with Forms	Working with Forms
Using Forms	Using Forms

### Dynamic Content


Dynamic Content overview video	https://youtu.be/T0b1ca6EhKI
Dynamic Content demonstration video	https://youtu.be/FjjvWWwys0U
Add custom logic to pages	Page Flow
Pre-designed logic blocks	Toolbox Blocks
Add content dynamically to pages and forms	Dynamic Content
Custom Code	Coding in Page Flow

### Database


Database overview video	https://youtu.be/3h_bRxORBlY
Database features	Data

### API and Third-party Integrations


Connections	Connections
Available Integrations	Services
SDKs and Libraries	SDK/Library Integration

### Custom logic in the cloud


Cloud Flow	Cloud Flow
Cloud Flow Editor	Cloud Flow Editor
Pre-designed logic blocks	Toolbox Blocks
Custom Code	Coding in Cloud Flow

# Overview When you sign-in to your Zingy account, you are automatically led to the Zingy Dashboard. The Zingy Dashboard allows you to: * Manage your Apps Use the [**Apps**](/dashboard/apps) tab to create, edit and delete your Apps. * View and Edit your account profile Use the [**Account Profile**](/dashboard/account-profile) option in the Settings menu to view and edit your profile. * Manage members *(Feature coming soon).* Add/remove members to your account. * View Invoices Invoices are available in the [**Invoices section**](/dashboard/billing-view-invoices) when you use the Billing option from the Settings menu. * Manage [**Payment Methods**](/dashboard/billing-payment-methods) View the payment method being used to charge your Zingy account. You can also Add or remove payment methods. * View [**Subscription Information**](/dashboard/billing-subscription) # Apps The Apps tab lists all the apps in your account.

*** ## Create your App Use the :heavy\_plus\_sign:**`New App`** icon to create a new Zingy app. ### App License When creating a new Zingy app, you can either add a new app license or use an existing credit/license. {% tabs %} {% tab title="Adding a New License" %}

To create a new Zingy app, choose your App's edition license. The monthly pricing for each of the editions will be displayed. For details about the features included in each app edition please visit . You will be charged **a one-time pro-rated fee** depending upon the number of days remaining in your billing cycle at the time of App creation. Starting with your next bill, this new App will be charged the ***regular*** monthly pricing. {% endtab %} {% tab title="Using an Existing Credit/License" %}

Create App using Credits — Create Zingy app using Credits

If your account has any un-expired credits/licenses they will be shown in the CREDITS/AVAILABLE LICENSES section as shown above. Credits are typically available when you delete an existing app. In such situations the credit remains in your account until your next bill, at which point the license is removed from your account. When you use up an existing license, **you will *****not***** be charged** for the new app and your existing billing amount will remain the same. {% endtab %} {% endtabs %} *** ### App Identifier After selecting your license, you will be asked to provide a name for your App. This name is used as an identifier for your app and needs to be **unique within your account**.

{% hint style="warning" %} Please note that **you cannot change the name/identifier for your app**, but can [change the display name](#change-your-apps-display-name) after the App is created. The name/identifier is only used for internally referring to your app. For the users of your app, you will separately select a unique URL when publishing your app. {% endhint %} *** ### Purchase Review

Before you hit the Create App button, you can review the details. It may take a few minutes to create and prepare your new App. The app's icon will indicate the status. ![](https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FGLKsXAxUKLFNAqsDQLif%2Fimage.png?alt=media\&token=e45042bd-84f2-46c5-8009-c5bb90478231)![](https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FBNcBmpjE2n4XgHxm4RvO%2Fimage.png?alt=media\&token=f5cc050e-83c0-46b5-89b6-bba6e4b9a160) *** ## Change your App's Display Name You can change the Display name of your app using the **`App Configuration`** menu option when you click on the app. (See below)

*** ## Edit your App This is where the fun begins! Use the **`Edit App`** menu option when you click on the app. (See image above). The [**Zingy App Editor**](/app-editor/app-components) opens in a new tab in your browser. *** ## Delete your App Use the **`Delete App`** menu option to delete the app. The license for the app becomes available as a credit for the remaining days in your billing cycle. You may use the license to create another app before your next bill. If license is not used, it is automatically removed and your invoice amount will be reduced accordingly. # Account Profile Use the Account Profile option in the Settings menu to view your Zingy account profile.

Click on edit to modify your profile and then Save it. {% hint style="warning" %} **NOTE: Your account type (Personal/Business) and your address is used to determine state and local sales taxes. Hence modifying the profile may cause changes to your monthly billing.** {% endhint %}

Zingy Dashboard Account Profile

# Billing - View Invoices Use the Billing option in the Settings menu to view your Zingy Invoices.

The invoices are displayed in chronological order.

Clicking on any invoice will bring up a detailed view for that invoice. You can also print or save the invoice as a PDF.

# Billing - Payment Methods Use the Billing option in the Settings menu to view the payment methods setup on your Zingy account.

*** ### Adding a new Payment Method Click the **`Add`**:credit\_card: button to add a new payment method. We currently accept major credit cards including Visa, Mastercard, American Express, Discover, etc.

Once a new payment method is added, it will still not be marked as a *Preferred Payment Method*. Click on the payment method entry and use the **`Set Preferred`** option (see below).

*** ### Deleting a Payment Method {% hint style="danger" %} **There needs to be at-least one valid payment method on your account.** {% endhint %} You can delete payment methods after their *Preference flag* is removed. Click on the payment method entry and use the **`Remove Preference`** option (see below).

The payment method can then be deleted using the **`Delete`** option (see below).

# Billing - Subscription Use the Billing option in the Settings menu to view details of your Zingy subscription.

Expand the subscription section to view your subscription type, your next charge date and the products included in the subscription.

# App Components A Zingy app is made up of one or more of the following: * **`Pages`** Most apps present information to users via one or more [pages](/app-editor/pages-and-forms). The pages are made up of page elements that can be dragged and dropped from the [page element sidebar](/app-editor/page-editor/page-editor-tour#page-element-sidebar). * **`Forms`** Forms are special types of [pages](/app-editor/pages-and-forms) that allow your app to take input from users. The data entered by the user can then be saved in your app's data or sent out externally using your app's connections. * **`Data`** The [data](/app-editor/data) for your app is organized into [database tables](/app-editor/data/database-tables) made up of fields. Think of fields as columns making up a row representing an entry in the table. The data can then be read or queried based on your own criteria. * **`Connections`** Using [connections](/app-editor/connections) your app can securely read from or send information to other apps or services. * **`Page Flow logic`** Using the [Page Flow](/app-editor/page-flow) Visual Editor, you can build logic to make every page interact with the user and display information. The Page Flow logic runs and remains active when the user navigates to that page in your app. * **`Cloud Flow logic`** Using the [Cloud Flow](/app-editor/cloud-flow) Visual Editor, you can build logic that can be triggered or invoked as and when required. Unlike Page Flow logic, Cloud Flow logic is always active and runs on the Zingy cloud. # App Editor Tour Get to know your way around the Zingy App Editor The App Editor is organized into the following tabs:

* **`Pages & Forms`** Allows you to create and edit the [pages and forms](/app-editor/pages-and-forms) in your App. Usually your app has at-least one page that allows the user to interact with your app. * **`Data`** Manage your App's [data](/app-editor/data) in the form of tables, fields and queries. * **`Cloud Flow`** Create [logic that runs in the background](/app-editor/cloud-flow) or when invoked via unique URL (web-hook). * **`Toolbox - Media`** Upload [files](/app-editor/media) used by your App. * **`Toolbox - Connections`** Lets your App talk to [external applications and APIs](/app-editor/connections) * **`Toolbox - Connection Data`** View and manage data saved by connections. * **`Toolbox - Page Slices`** View and manage the page slices used by [Structured Pages](/app-editor/pages-and-forms/what-is-a-structured-page). * **`Settings - App Settings`** View and manage various [settings](/app-editor/app-settings) including the App's unique URL, the app level fonts, and app level HTML head and CSS style definitions, etc. * **`Settings - Users`** Add/remove [users](/app-editor/app-users) that access your app. Set user roles by assigning them to specific [groups](/app-editor/app-user-groups). * **`Settings - User Groups`** Define your app's [user groups](/app-editor/app-user-groups) * :checkered\_flag: **`-`** :arrow\_up: **`Publish App`** [Publish](/app-editor/publishing-your-app) your a new version of your app. * :checkered\_flag: **`-`** :rocket: **`Launch App`** Open your app's unique URL in a new browser tab. # App Settings The App Settings screen allows configuring important settings related to your Zingy app. You can access the app settings screen using the App Settings option found in the Settings menu of the [App Editor](/app-editor/app-editor-tour). {% hint style="warning" %} Please note that you need to [re-publish your app](/app-editor/publishing-your-app) for the settings to take effect. {% endhint %} *** The app settings are categorized into the following sections: ## Publishing ### `Publish Status` The Publish Status setting indicates the current publication status of your app. Additionally, it provides the option to take your app offline by designating it as 'Not Published'. It's important to note that you cannot manually set the app as 'Published' using this setting. The status will automatically change to 'Published' once you [publish your app](/app-editor/publishing-your-app). ### `Starting Page` The Starting Page setting sets the home page or the main page for your app. When the page selected as the Starting Page is not [publicly accessible](/app-editor/page-settings#access-security), an automatic login screen will be presented. After a successful login, the app will automatically redirect the user to the desired page. ### `URL` The URL setting enables you to set up a distinctive domain through which users will access your app. It is mandatory to select a unique domain before you can proceed with publishing your app. To make a selection, click on the 'Change URL' button and type in the desired domain.

The value you enter must meet the following requirements: * Must not begin with a number * Consists only of letters and numbers * Is a minimum 6 characters in length If your desired domain is available, you can click on the 'Save URL' button to complete the selection.

App Settings: Saving the selected URL domain

At present, we provide your app's domains within the primary domain of .myzingy.app. However, we have future plans to introduce a wider range of domain choices. *** ## Fonts {% hint style="success" %} NOTE: You can override the fonts for a specific page using the [Fonts setting for the page](/app-editor/page-settings#fonts). Additionally, you can also override the font of a specific element on a page by: * Using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. * Using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) under the Font section. * Adding this font to the Font List in App Settings or at the page. If you want to use a font that is not supported, you can add the [font using CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts). {% endhint %} ### `Font List` Every page and form within your Zingy app will automatically adopt the defined fonts specified here. Additionally, this setting allows for the removal of fonts that are no longer required. ### `Heading Font` Select the font to be used for displaying headings in your page using the Heading Font setting. By default the page will use the heading font selected in your [app's settings](/app-editor/app-settings). ### `Body Font` The Body Font setting allows you to select the font to be used in your page for all non-heading elements. By default the page will use the body font selected in your [app's settings](/app-editor/app-settings). *** ## Advanced ### `HTML Head Additions` The HTML Head Additions setting allows you to include custom Javascript (via script tag) and CSS files (via link tag). The contents of the HTML Head Additions setting, will be inserted into all pages and forms along with the [HTML Head Additions setting](/app-editor/page-settings#html-head-additions) defined in each [page or form settings](/app-editor/page-settings). {% hint style="warning" %} It is recommended that you limit the contents if this setting to script, link or meta tags. {% endhint %} ### `Custom Style Definitions` The HTML Head Additions setting allows you to define your own CSS classes. The contents of the Custom Style Definitions setting will be inserted into all pages and forms along with the [Custom Style Definitions](/app-editor/page-settings#custom-style-definitions) setting defined in each [page or form settings](/app-editor/page-settings). {% hint style="danger" %} Please define your CSS classes directly and do not include a style tag. The style tag is automatically generated. {% endhint %} # App Users The App Users screen can be accessed by selecting the Users option located in theSettings menu of the [App Editor](/app-editor/app-editor-tour). Through the App Users screen, you have the ability to add users to your app and assign them to one or multiple user groups or roles. After adding one or more users, you can regulate access to various resources within your Zingy app, including [pages/forms](/app-editor/page-settings#access-security), database tables, connections, Cloud Flow webhooks, and more. *** ## User Listing The app user's screen displays a list of your app's users. It also provides a way to quickly search and lookup a specific user. The image below shows an example of the user listing where the username, the group/role and buttons to edit and remove a user are provided for each user.

App Users screen displaying the list of users.

*** ## Adding a user To add a new user to your app, simply click the 'Add' button and input the user's details in the subsequent screen (as shown in the example image below).

App Users screen: Example for adding a new user

The Username, Password, Status, and Email fields hold utmost significance. While the First Name, Last Name, and Phone fields require values to be set, they are primarily used for informational purposes. The Web Hook Key setting for a user is not mandatory, except when you intend to utilize this user's credentials to access a Cloud Flow webhook. In such cases, you can generate a unique key by clicking on the "Generate Key" button, and then copy the randomly generated value for further use. When assigning role/group membership, you will observe that the 'All Users' group with the 'Staff Level 1' role is already pre-specified. This combination of the 'All Users' group and 'Staff Level 1' role represents the minimum access level for users. Every user is inherently part of this group and role by default. You have the flexibility to include additional role/group memberships as needed, including membership for the Admin group. The Admin group signifies the highest level of access, and all resources within your app, such as pages/forms, database tables, and more, are inherently configured to grant complete access to the Admin group by default. *** ## Editing a user To modify the details of a particular user, simply click on the corresponding edit in the user listing. The screen for editing a user is identical to the one used for adding a user. You have the ability to modify all settings, including the user's role/group membership, as per your requirements. *** ## Removing a user To remove a particular user, simply click on the corresponding delete button in the user listing. # App User Groups The App User Groups screen allows you to assign personalized names to user groups that correspond to the specific terminology and naming conventions that are relevant to your app. You can access the app user groups screen using the User Groups option located in the Settings menu of the [App Editor](/app-editor/app-editor-tour). *** ## Groups Zingy offers a total of 12 user groups, allowing you to customize the names of all groups except for the 'All Users' and 'Admin' groups, which have predefined names. It is important to note that you are not required to utilize all of the available groups, and there is no issue if certain groups are not used. *** ## Roles Zingy provides five predefined roles that offer different levels of privileges. These roles, listed in ascending order of privilege, are: * Staff Level 1, * Staff Level 2 * Supervisor * Manager * Dept Lead. When assigning a user to a group, it is essential to specify the role within that group. Similarly, when defining access control and security rules for resources such as pages, database tables, connections, and more within your app, you are required to specify both the group and the minimum role level. Users in the group but with lower privilege roles will not be allowed to access the resource. *** ## Customizing group names To change the name of a group, simply enter the desired name next to the group's number and click Save.

# Publishing your App Once you have completed the design and development of your app and are prepared to allow users to access it, you can utilize the Publish App option located in the checkered flag menu of the [App Editor](/app-editor/app-editor-tour).

Publishing your app brings it to life and enables users to access it using the [designated URL](/app-editor/app-settings#url) specified in your [app's settings](/app-editor/app-settings). The published version of your app is a snapshot that encompasses its resources, such as: * [App Settings](/app-editor/app-settings) * Content of [Pages and Forms](/app-editor/pages-and-forms) including [Page Flow](/app-editor/page-flow) logic * The [Page Settings](/app-editor/page-settings) for any of your pages or forms * [Connections](/app-editor/connections) and Connection Profiles * [Cloud Flow web-hooks](/app-editor/cloud-flow#web-hook) * [Cloud Flow background tasks](/app-editor/cloud-flow#background-task) * Access/Security rules for [Database Tables](/app-editor/data/database-tables#access-security-rules), [Pages/Forms](/app-editor/page-settings#access-security), [Connections](/app-editor/connections#access-security) and [Cloud Flow](/app-editor/cloud-flow#access-security) As a result, any changes made to the above items will require you to republish your app. The advantage of this approach is that it allows you to continue developing your app while users access a functional version, ensuring a seamless user experience. {% hint style="success" %} NOTE: Adding, removing or modifying users from your app does not require re-publishing. {% endhint %} *** ## Prerequisites In order to publish your app, the following steps need to be completed first: * A [designated URL](/app-editor/app-settings#url) must be assigned to your App. * You would need to add at-least one [user to your app](/app-editor/app-users) if you have any page or form that is not [publicly accessible](/app-editor/page-settings#access-security). # Pages and Forms # Create a Page In the App Editor, go to the **`Pages & Forms`** tab and use the :heavy\_plus\_sign:**`New`** icon to add a new page to your App.

Select **Page** as the type and provide a unique ID for your page. {% hint style="warning" %} Please note that the **ID of your page cannot be changed**, but you can change the display name for the page. The ID is used internally to refer to the page. The ID also gets used as the default name in the page's URL when you publish the page. You are allowed to change the name in the page's URL. See [Page Publishing](/app-editor/page-settings#publishing) for more information. {% endhint %}

Once the App editor creates your page, it will be shown amongst the list of pages.

See [Adding Page Content](/app-editor/page-editor/adding-page-content) for information about designing your page. # Create a Structured Page {% hint style="info" %} For more information on Structured Pages, see: [What is a Structured Page ? ](/app-editor/pages-and-forms/what-is-a-structured-page) {% endhint %} In the App Editor, go to the **`Pages & Forms`** tab and use the :heavy\_plus\_sign:**`New`** icon to add a new page to your App.

Select **Structured Page** as the type and provide a unique ID for your page. {% hint style="warning" %} Please note that the **ID of your page cannot be changed**, but you can change the display name for the page. The ID is used internally to refer to the page. The ID also gets used as the default name in the page's URL when you publish the page. You are allowed to change the name in the page's URL. See [Page Publishing](/app-editor/page-settings#publishing) for more information. {% endhint %}

Once the App editor creates your page, it will be shown amongst the list of pages.

{% hint style="warning" %} Structured Pages work on Standard or higher edition Apps. While you can explore this feature on any app edition, the pages will only get published in Standard or higher editions. {% endhint %} See [Adding Content to Structured Pages](/app-editor/page-editor/adding-content-to-structured-pages) for information about designing your structured page. # What is a Structured Page ? A structured page consists of 3 distinct sections (header, body and footer) containing editable page slices. The header and footer sections are limited to one page slice. The body section allows you to add one or more page slices. The page slices can be shared across pages if required e.g. if you want all pages to have a logo and menu section at the top. The Zingy website pages are examples that have the same header and footer:

See [Adding Content to Structured Pages](/app-editor/page-editor/adding-content-to-structured-pages) for more information. # Create a Form In the App Editor, go to the **`Pages & Forms`** tab and use the :heavy\_plus\_sign:**`New`** icon to add a new page to your App.

Select **Form** as the type and provide a unique ID for your page. {% hint style="warning" %} Please note that the **ID of your form cannot be changed**, but you can change the display name for the page. The ID is used internally to refer to the form. The ID also gets used as the default name in the page's URL when you publish the form. You are allowed to change the name in the form's URL. See [Page Publishing](/app-editor/page-settings#publishing) for more information. {% endhint %}

Once the App editor creates your form, it will be shown amongst the list of pages and forms.

See [Working with Forms](/app-editor/page-editor/working-with-forms) for information about designing to your form. # Page Editor # Page Editor Tour Get to know your way around the Zingy Page Editor {% hint style="success" %} The Page Editor is used to edit both *Pages* and *Forms* hence the information in this section applies to both. {% endhint %} To launch the page editor, click on a page or form and select the **`Edit`** option.

*** The page editor consists of the following sections: ## Main Toolbar

The main toolbar provides access to important functionalities such as: *

Page Flow editor *

Functional preview of your page. For more information see [Page Preview](/app-editor/page-editor/page-preview). *

Viewing/Editing your page's settings *

Saving your page *

Exiting the page editor *** ## Page Element Sidebar {% hint style="info" %} For a [Structured Page](/app-editor/pages-and-forms/what-is-a-structured-page), no Page Element Sidebar is displayed in the page editor. Instead the Page Element Sidebar is present when you edit a page slice. {% endhint %}

Zingy Page Editor - Page Element Sidebar

The page element sidebar has two primary panels: ####

Page Element Library

The page element library provides quick access to various page elements that can be added to your page. The library is organized into categories that can be expanded or collapsed for ease of use. ####

Page Tree View

Page Structure View — Page Element Sidebar - Page TreeView

The page tree view shows your page in a hierarchical structure. For more information please see: [Page Tree View](/app-editor/page-editor/working-with-page-elements#page-tree-view) **.** *** ##

:magic\_wand:AI Wiz **`AI Wiz`** allows you to generate and add custom page elements by simply typing what you want in plain English. The generated elements are added to your Page Element library under the AI Wiz category. For more information please see: [Using AI Wiz in the Page Editor](/app-editor/page-editor/using-ai-wiz-in-the-page-editor). ## Page Content Area

The page content area displays your page's content and allows you to edit or modify the page elements. For a structured page, the page content area allows you to add, reorder or delete page slices for the header, body and footer sections.

Zingy Page Editor - Page Content Area for a structured page

For more information please see: * [Adding Page Content](/app-editor/page-editor/adding-page-content) * [Adding Content to Structured Pages](/app-editor/page-editor/adding-content-to-structured-pages) *** ## Page Content Toolbar {% hint style="info" %} For a Structured Page, the Page Content Toolbar is present when you edit a layout on the page. {% endhint %}

The page content toolbar allows you to: *

: View your page design in desktop, tablet and mobile screen sizes. See [Responsive Design](/app-editor/page-editor/responsive-design) for more information. *

: Show/Hide the dotted borders around elements *

: Setup data table information for *Forms* . # Adding Page Content {% hint style="info" %} The information in this section refers to definitions and concepts introduced in the [Page Editor Tour](/app-editor/page-editor/page-editor-tour) section. {% endhint %} {% hint style="success" %} You can use the information in this section for adding content to both *Pages* and *Forms*. {% endhint %} The page's content is displayed in the Page Content area of the Page Editor.

*** The following sections describe the various ways you can add content to a page. ### 1) Adding content from the Page Element Library Content from the page element library can be added in following ways: #### **a) Drag and drop element from the library** Select the element from the sidebar and drag it into the page content area. In the example below, we add the 2 column layout element into the page and then add an image and a heading into the two columns. Depending on the element, you can drag it into another element or to any part of the page. e.g. Layout columns can only be added to Layout rows. For details on various other built-in elements, please see [Built-in elements in Page Element Library](/app-editor/page-editor/built-in-elements) . {% embed url="" %} Video: Add content using drag and drop from library {% endembed %} #### **b) Select element on your page and click to add** You can also add content to the page by pre-selecting an element in the page content area and then clicking on the desired element in the library. In the example below we select the column on the right and then click on the 'Image' element to add it. {% embed url="" %} Video: Click to add content {% endembed %} *** *** ### 2) Importing HTML code The Page Editor allows importing HTML code into the main body or into an existing element on the page. Please note that only certain elements allow importing HTML code inside them. The example below shows how to import html code into the main body of your page. If your page already has existing content, the new content will be appended to the end of the page. {% embed url="" %} Video: Import HTML into main body {% endembed %} The example below imports an image via HTML code into a layout column. If the selected element already has content, the new content will be appended to the end. {% embed url="" %} Video: Import HTML inside another element. {% endembed %} When you enter your HTML code, **do not include** javascript code via the **`script`** tag, CSS files via the **`link`** tag or style definitions via the **`style`** tag. {% hint style="danger" %} Disallowed tags will be removed from the HTML code. Disallowed tags include unsafe ones like **`script`**or**`link`**, and tags that form the page skeleton like **`html`**, **`head, body`** or ones that usually appear within the **`head`** tag like **`title`**, **`meta`**, **`style`**, etc. Zingy supports Bootstrap based CSS classes. For more information see: {% endhint %} {% hint style="success" %} You can add custom scripts, css files and define custom styles for your page via the Page Settings screen. If you want these to be applied to all pages of your app, you can do this via the App Settings screen. {% endhint %} *** ### 3) Using :magic\_wand:AI Wiz If you are looking for some ideas and inspiration, AI Wiz can help you generate layouts and content by simply typing what you want in plain English. For more information please see: [Using AI Wiz in the Page Editor](/app-editor/page-editor/using-ai-wiz-in-the-page-editor). ### See also {% content-ref url="/pages/qxoE3l3g1M1NW9mpyNmo" %} [Working with Page Elements](/app-editor/page-editor/working-with-page-elements) {% endcontent-ref %} {% content-ref url="/pages/PFbZwWWRuTUviYyxFQQe" %} [Editing Text](/app-editor/page-editor/editing-text) {% endcontent-ref %} # Adding Content to Structured Pages {% hint style="info" %} The information in this section refers to definitions and concepts introduced in the [What is a Structured Page ?](/app-editor/pages-and-forms/what-is-a-structured-page) and [Page Editor Tour](/app-editor/page-editor/page-editor-tour) sections. {% endhint %} The image below shows a empty structured page with the header, body and footer sections.

Page Editor: Page Content Area for Structured Page

*** ## Adding Page Slices To add a page slice to the header, body or footer section, click anywhere on the section and select the **`+ Add`** option from the options menu. For the body section, you can add more than one page slice. The header and footer section can only have one page slice.

The video below demonstrates a structured page with header, body and footer sections. The header consists of a menubar. The footer contains a copyright message. The body of this specific page contains an example hero image. {% embed url="" %} Video: Adding Page Slices to a Structured Page {% endembed %} After you have made a page header and footer slice, you can add them to other structured pages. Please note that: Modifying the page slice via any structured page will automatically change it in other pages. If you want a page to have an exclusive copy of an existing slice, be sure to check the *Make a Copy* switch when adding the slice. The video below adds the same menubar and footer copyright message to a new structured page. {% embed url="" %} Video: Share existing page slices with other Structured Pages {% endembed %} *** ## Page Slice Options Menu

In the page editor, clicking on any page slice of a structured page will present a menu with the following options: * **`Edit`** The edit option takes you into the page editor where you can design and edit the page slice. * **`Add`** For the body section, the Add option will allow you to either add an exiting page slice or create a new one. The page slice is then inserted immediately after the selected page slice. For header and footer sections, the add option will only show if no slice has been added to those sections. * **`Remove`** This option removes the slice from the page. The slice itself is retained in your slice library. *** ## Reordering Page Slices in the body section You can change the order of the slices added to the body section. Simply click on the slice and drag it to the desired position. See the example video below. {% embed url="" %} Video: Reordering slices {% endembed %} *** ## Page Slices Library All the page slices that you create can be managed via the page slices library. In the App Editor, use the Toolbox menu and select Page Slices to access the page slices library.

# Working with Page Elements {% hint style="info" %} The information in this section refers to definitions and concepts introduced in the [Adding Page Content](/app-editor/page-editor/adding-page-content) section . {% endhint %} ## Element Toolbar In the page content area, the currently selected element is shown with a border along with the Element Toolbar:

The available buttons in the element toolbar are described below: ####

Select parent of the current element The Select Parent button in the element toolbar allows you to select the parent of the current element. i.e. the selection now moves to the parent element. In the example below, the currently selected element is a Layout Column (*named Column26*). The selection is then moved to its parent (a Layout Row *named Row8*). {% embed url="" %} Video: Move selection to parent element {% endembed %} ####

Move the selected element to another part of the page The Move Element button in the element toolbar allows you to drag and drop the element to another part of the page. Please note that logical rules apply: e.g. a Layout Column can only be moved into a Layout Row. In the example below, the currently selected element (an image), is moved from the left column to the right column. {% embed url="" %} Video: Move element {% endembed %} Elements can also be [moved using the page tree view](#moving-elements). ####

Clone the selected element The Clone button in the element toolbar creates an identical copy of the selected element (including contained elements) and adds it immediately after the selected element. This can also be achieved by using standard clipboard copy/paste commands. In the example below, the Layout Column on the left (named *Column17*) containing the text "*Some text in Column1"* is cloned and added immediately after the selected column. The existing column on the right now becomes the third column of the parent Layout Row. The page editor automatically assigns a new ID to cloned elements. {% embed url="" %} Video: Clone element {% endembed %} ####

Delete the selected element The Delete button in the element toolbar deletes the selected element (including contained elements). In the example below, the Layout Column (named Column30) is deleted. The parent Layout Row now contains two columns. {% embed url="" %} ####

Text Alignment The Text Alignment button in the element toolbar is available for elements that contain [editable text](/app-editor/page-editor/editing-text) e.g. the **`Text`**, **`Inline Text`**, **`Link`**, **`Heading`**, etc. Clicking on the option will bring up a menu with alignment choices. {% embed url="" %} Video: Text alignment options {% endembed %} ####

Options The action taken by the Options button in the element toolbar depends on the selected element. In most cases it will open the settings screen for the selected element. In some cases, a menu is presented with options specific to the element along with the option to open the settings screen. See [Page Element Settings](/app-editor/page-editor/page-element-settings) for more information. *** ## Page Tree View The page tree view is located in the page element sidebar. It makes it easier to understand the general anatomy/organization of the page. It also makes it easy to select elements occupying a very small area on the screen.

#### Element Selection Selecting an element in the page content area will highlight the element in the page tree view and vice-versa. To view an element in the page tree view, select it in the page content area. The page tree view will automatically expand the hierarchy of elements leading to the selected node. The example video shows various elements being selected in the page content area with the corresponding element being highlighted in the page tree view. {% embed url="" %} Video: Show element in Page Tree View {% endembed %} You can also click on an element in the page tree view and select it in the page content area. See the example video below. {% embed url="" %} Video: Click element in Page Tree View to select in Page Content Area {% endembed %} #### Moving elements You can also move elements to another part of the page using the page tree view. In the example video a button is moved to another part of the page. The second part of the video also shows a layout column being moved after another layout column within the same layout row. {% embed url="" %} Video: Move elements using Page Tree View {% endembed %} # Page Element Settings The page element settings screen is invoked via the [Options button](/app-editor/page-editor/working-with-page-elements#options) in the [Element Toolbar](/app-editor/page-editor/working-with-page-elements#element-toolbar). The element settings screen allows you to change settings and the design of a page element. For all elements, the element settings screen consists of three tabs: **`Options`**, **`Design`** and **`Advanced`**

Element Settings tabs — Element settings tabs

*** ### Options Tab The options tab generally consists of settings specific to the selected element. However, there are two common settings that appear for all elements: **`Name`** and **`Custom CSS Classes`**.

#### Name The Name setting allows you to provide a friendlier name to an element. By default the page editor assigns a sequential name for the element. #### Custom CSS Classes The Custom CSS Classes setting allows you to add one or more CSS classes to the page element. The classes can be from: * The standard [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) based CSS classes that Zingy supports. * Custom CSS files or styles that you can define in the Page Settings or App Settings. {% hint style="info" %} For quickly adjusting margin and padding settings using CSS classes, see [here](/app-editor/page-editor/padding-and-margin#adjustments-using-css). {% endhint %} #### Element specific settings The example below shows the element settings specific to the **`Text`** element. The common settings Name and Custom CSS Classes are present along with settings specific to the **`Text`** element.

Text element specific settings in Options tab

Please refer to the element specific information sections for more information. *** ### Design Tab {% hint style="warning" %} Most page elements provide quick access to styling and design controls in the [Options tab](#options-tab). You only need use the design tab if you are looking for something beyond what is offered. Additionally the [Custom CSS Classes](#custom-css-classes) setting in the options tab also allows for style and design customization, using either standard [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) based CSS classes that Zingy supports, or your own (if you provide your own CSS files or CSS style definitions). {% endhint %}

The design tab allows you to customize how the element gets rendered on your page. These settings are organized into various categories like Font, Spacing, Border Radius, etc. The responsive design implementation allows you to control the look & feel for various screen sizes. For more information see [here](/app-editor/page-editor/responsive-design#page-element-settings-design-tab). *** ### Advanced Tab {% hint style="danger" %} The settings in this tab require knowledge of HTML and CSS and hence we do not normally recommend modifying any settings here. {% endhint %} The advanced tab provides HTML specific information about the selected element. This information can be used in scenarios like using custom javascript code in [Page Flow](/app-editor/page-flow). The Element ID shown in this tab is the [HTML ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) for the element.

# Responsive Design Responsive design is an approach that makes your Zingy app adapt and respond to different devices and screen sizes. The goal is to provide an optimal user experience regardless of whether the user is accessing the Zingy app on a desktop computer, laptop, tablet, or smartphone. The page editor allows you design your pages responsively in the following ways: ## Page Element Settings: Design Tab The [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) in the [Page Elements Settings](/app-editor/page-editor/page-element-settings) screen contains 4 sub-tabs: *

Main design settings for the element Use the settings in the main sub-tab for changing the overall look of the element across all screen sizes i.e. these design settings become the default for this element, unless the same setting is modified in the Desktop/Tablet/Mobile sub-tabs. **If you only want a design setting to be effective for a specific screen size then leave that setting unchanged in the Main tab.** *

: Desktop/Laptop view design settings for the element Use the settings in the desktop sub-tab for changing the look of the element when viewed on a larger screen like a desktop or laptop computer. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present). *

: iPad/Tablet view design settings for the element Use the settings in the tablet sub-tab for changing the look of the element when viewed on an iPad or other tablet like devices. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present). *

Mobile phone view design settings for the element Use the settings in the mobile sub-tab for changing the look of the element when viewed on a mobile phone or similar smaller screen device. If a setting here is left unchanged, it will take the setting from the main sub-tab (if present). {% hint style="info" %} The setting from the main sub-tab (if present) will be inherited unless overridden. {% endhint %} {% hint style="warning" %} NOTE: Unlike the options tab described below, the smaller screen size setting does not get inherited by the larger screen sizes. **Each screen size needs to be set separately or it inherits the main sub-tab setting.** {% endhint %} *** ## Page Element Settings: Options Tab Many built-in elements allow changing certain design settings via the [Options Tab](/app-editor/page-editor/page-element-settings#options-tab) in the [Page Elements Settings](/app-editor/page-editor/page-element-settings) screen. Some examples of such elements include [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), and others. These settings are organized similar to the [design tab of the page element settings](#page-element-settings-design-tab) described above allowing a Main, Desktop, Tablet and Mobile version for that setting. {% hint style="info" %} The main version of the setting (if present) will be inherited for all screen sizes unless overridden. {% endhint %} {% hint style="warning" %} NOTE: **If not overridden for a specific screen size**, a smaller screen size setting (if present) **will be inherited**. e.g. If you choose a specific value for Mobile, then this value will apply to Tablet and Desktop. **This behavior is different from the design tab described above.** {% endhint %} *** ## Page Content Toolbar The [page content toolbar](/app-editor/page-editor/page-editor-tour#page-content-toolbar) in the [page editor](/app-editor/page-editor/page-editor-tour) offers buttons

to switch between desktop, tablet and mobile views while designing your page. {% hint style="info" %} For information about creating visually appealing and well-structured layouts also read [Padding and Margin](/app-editor/page-editor/padding-and-margin) . {% endhint %} # Padding and Margin Padding and margin are essential concepts in page design that contribute to the overall layout and spacing of elements. Padding refers to the space between the contents of an element and its border. It allows you to create breathing room within an element, adding space around its content. By adjusting the padding, you can control the distance between the content and the edges of the element. This helps to enhance readability, create visual separation, and maintain a harmonious balance within the design. Margin refers to the space outside the border of an element, creating a gap between adjacent elements. It determines the distance between elements and affects the overall spacing and alignment on the page. By manipulating the margin, you can control the spacing between elements, achieving a desired visual hierarchy, and improving the overall aesthetics of the layout. It's important to understand and use padding and margin effectively in page design to create visually appealing and well-structured layouts. Careful consideration of padding and margin ensures proper spacing, readability, and an overall pleasing user experience. *** ## Adjustments using Design Tab The video below demonstrates both padding and margin adjustments in the Page Editor using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). Please refer to its labelled chapters for more information on the adjustments being made. {% embed url="" %} Video: Adjusting padding and margin {% endembed %} *** ## Adjustments using CSS You can also adjust the padding and margin by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. In addition to the option of using your own CSS files and specifying the classes, you also have the option of using pre-made padding and margin utility classes from [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) which Zingy supports. Some of these are detailed below. {% hint style="info" %} The size term mentioned below is a number from 0 through 5, with 5 representing the highest amount and 0 representing none. {% endhint %} | CSS Class Pattern | Description | Example CSS class | | --------------------------------------- | ----------------------------------------- | ------------------------------------------------- | |

m-<\>/

p-<\>

| Sets the margin/padding in all directions |

m-0 through m-5/

p-0 through p-5

| |

mx-<\>/

px-<\>

| Sets the left and right margins/paddings |

mx-0 through mx-5/

px-0 through px-5

| |

my-<\>/

py-<\>

| Sets the top and bottom margins/paddings |

my-0 through my-5/

py-0 through py-5

| |

mt-<\>/

pt-<\>

| Sets the top margin/padding |

mt-0 through mt-5/

pt-0 through pt-5

| |

mb-<\>/

pb-<\>

| Sets the bottom margin/padding |

mb-0 through mb-5/

pb-0 through pb-5

| |

ml-<\>/

pl-<\>

| Sets the left margin/padding |

ml-0 through ml-5/

pl-0 through pl-5

| |

mr-<\>/

pr-<\>

| Sets the right margin/padding |

mr-0 through mr-5/

pr-0 through pr-5

| In addition to the above utility classes, [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) also offers responsive versions of the above using the symbols lg, md and sm to desktop, tablet and mobile screen sizes. e.g. mb-lg-5 would set the bottom margin only on desktops, whereas px-md-2 would set the left and right paddings on tablets and larger screen devices. Another example is mt-sm-3 would set the top margin on mobile and larger screen devices. Please refer to [Bootstrap](https://getbootstrap.com/docs/4.6/utilities/spacing/) documentation for more detailed information. # Editing Text Elements that allow text editing are found under the 'Basic' category of the Page Element Library.

When you are modifying text, a Text Edit Toolbar automatically appears for the element as shown below.

The text edit toolbar buttons are: * Bold selected text * Italicize selected text * Underline selected text * Strike-through selected text * Turn selected text into a [Link](#link) element * Start an un-ordered list i.e. with bullets * Start an ordered list i.e. a numbered list * Make selection into [Badged Text](/app-editor/page-editor/built-in-elements/badged-text). * Make selection into a [Dynamic Content](/app-editor/dynamic-content) placeholder**.** (Only applicable if the element is inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design) element). Beyond the above described information, each of these elements differ in their rendering behavior as explained below: ### Text By default **`Text`** elements occupy the full horizontal area they are contained in.

{% hint style="success" %} For writing text over multiple lines, use the **`Text`** element with the **`Type`** setting set to **`Default`**. {% endhint %} When the **`Type`** setting is changed to **`Inline`** the elements only occupy as much horizontal space as they need as shown below.

Note that in the above example, both the elements have been set as Inline. If only one element is set as Inline, the other element would still occupy the full horizontal space.

### Inline Text The **`Inline Text`** element behaves similar to a **`Text`** element with the **`Type`** set to **`Inline`**. The main difference is that **`Inline Text`** elements always remain inline and do not have any other settings. ### Link The **`Link`** element creates a clickable web hyperlink that can be configured to point at a specific URL. The **`Link`** element behaves similar to an **`Inline Text`** element or a **`Text`** element with the **`Type`** set to **Inline**. A Link element is created automatically if you use the hyperlink option in the text edit toolbar. For more information about Link see [**here**](/app-editor/page-editor/built-in-elements/link). {% hint style="info" %} **`Text`**, **`Inline Text`** and **`Link`** elements use the Body font defined at the page level (in Page Settings) or the Body font defined at the app level (in App Settings). To change the font for a specific element, use the [design tab in the element settings](/app-editor/page-editor/page-element-settings#design-tab). {% endhint %} ### Heading The **`Heading`** element can be configured for various sizes: Heading 1 (largest) through Heading 6 (smallest). Unlike **`Text`**, **`Inline Text`** and **`Link`** elements, **`Heading`** elements can contain other elements and thereby have those inherit its font settings. {% hint style="info" %} **`Heading`** elements use the Heading font defined at the page level (in Page Settings) or the Heading font defined at the app level (in App Settings). To change the font for a specific element, use the [design tab in the element settings](/app-editor/page-editor/page-element-settings#design-tab). {% endhint %} # Using AI Wiz in the Page Editor If you are looking for ideas regarding the design/layout or content of a page, AI Wiz will be your best friend! AI Wiz uses [Generative Artificial Intelligence (AI)](https://en.wikipedia.org/wiki/Generative_artificial_intelligence) to generate content based on instructions in plain english. Generative AI makes use of [large language models (LLMs)](https://en.wikipedia.org/wiki/Large_language_model) and [generative pre-trained transformers (GPT)](https://en.wikipedia.org/wiki/Generative_pre-trained_transformer) to output very effective content that can be used as a starting point or reference when you are designing a page for your app. The page editor AI Wiz can be accessed from the [page element library](/app-editor/page-editor/page-editor-tour#page-element-library) under the **`AI Wiz`** category.

Choose the 'Create' button to specify what you want in the screen that follows.

A new element appears in the library under the AI Wiz category. The element is grayed out until the processing completes and is shown in green once ready.

You can drag and drop the new element just like the built-in elements in the library and have these elements referenced by your Page Flow logic. *** ### AI Wiz Examples The video below shows a simple conference welcome screen layout and content generated by AI Wiz. {% embed url="" %} AI Wiz: Conference welcome screen {% endembed %} In this second example, we make AI Wiz generate a home screen for a student management software. {% embed url="" %} AI Wiz: Student management software home screen {% endembed %} Lastly, for a more complex example, we make AI Wiz generate the main screen for a project management software. {% embed url="" %} AI Wiz: Project management software main screen {% endembed %} In addition to generating designs and layouts, AI Wiz can also generate write-ups and textual content based on any topic. e.g. ***short write up on penguins*** produces:

{% hint style="warning" %} Note: AI Wiz may produce slightly different content for each run for the same input. {% endhint %} {% hint style="danger" %} Every account gets a limited number of free AI Wiz credits every month. You can however, purchase add-on AI Wiz credits if you need to generate content beyond the free quota. {% endhint %} # Built-in elements # Link

Available under the 'Basic' category, the **`Link`** element is [text editable](/app-editor/page-editor/editing-text) and creates a clickable hyperlink. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `HRef` Sets the destination URL for the hyperlink. The URL can be external to other websites or internal to other pages of your app. {% hint style="info" %} Using [Page Flow](/app-editor/page-flow), you can define custom actions instead of just navigating to the URL. {% endhint %} ### `Target` Choose whether you want to open the URL in a new tab/page or in the same page. ### `Link Action` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-toggle`** attribute. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements use this by setting the value to ***`dropdown`***. You can also use this to control a [Collapsible Area](/app-editor/page-editor/built-in-elements/collapsible-area) element by setting the value to ***`collapse`***. ### `Action Target` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-target`** attribute. The value is set to the Element ID of the element to be controlled. To find the Element ID see [here](/app-editor/page-editor/page-element-settings#advanced-tab). {% hint style="info" %} The Element ID needs to be prefixed with a # character. This is also known as ID selector syntax. For more information click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors). {% endhint %} ### `Popup Menu Icon` Enable this if you want a :arrow\_down\_small:arrow to appear next to the link to indicate that it will invoke a popup menu. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements turn this setting on. ### `Type` Select *Button* to turn this link into a button. ### `Button Look` Only applies if the **`Type`** is set to *Button*. Select from a pre-defined list of background and text colors for the button look. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Button Size` Only applies if the **`Type`** is set to *Button*. Select from a pre-defined list of sizes. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Dynamic Content` {% hint style="warning" %} NOTE: This setting only appears for Link elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design) element. {% endhint %} When this setting is ON, it enables you to set the name of the placeholder field (see **`Field Name`** setting below) with which the value of the [**`HRef`**](#href) setting will be dynamically provided using [Page Flow](/app-editor/page-flow). ### `Field Name` {% hint style="warning" %} NOTE: This setting only appears for Link elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design) element. {% endhint %} When the Dynamic Content setting is ON, this setting contains the name of the placeholder field with which the value of the [**`HRef`**](#href) setting will be dynamically provided using [Page Flow](/app-editor/page-flow). {% hint style="info" %} For a general information about hyperlinks see: {% endhint %} # Image

Available under the 'Media' category, the **`Image`** element allows you to display images. *** ## Sizing the image By default, the image element adjusts its width based on the parent element it is contained within. The height of the image is automatically adjusted to preserve its aspect ratio. You can change the size of the image using the following ways: #### Border dragging You can resize images by using the rectangular notches that appear when you select the element. The aspect ratio of the image is maintained during the resizing process.

#### Custom CSS Classes Set [Custom CSS classes](/app-editor/page-editor/page-element-settings#custom-css-classes) in the Options tab in the element settings for the **`Image`** element. #### Design Tab Set the values for *Width*, *Maximum Width*, *Height*, *Maximum Height* in the ***Sizing*** category. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Image Location` Specifies the URL of the image you want to display. You can set this to an external URL or the URL of an image from the app's Media Library (see **`Select from Media Library`** below). ### `Image Description` Provide a textual description of the image. This is useful for scenarios where the browser does not display the image. ### `Select from Media Library` Allows you to select an image from the app's Media Library. It automatically sets the **`Image Location`** to the URL of the image selected. ### `Auto Sizing` Ensures that the image width fits in the area of the parent element it is inside. The height of the image is adjusted to maintain its aspect ratio. ### `Dynamic Content` {% hint style="warning" %} NOTE: This setting only appears for Image elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design) element. {% endhint %} When this setting is ON, it enables you to set the name of the placeholder field (see **`Field Name`** setting below) with which the value of the [**`Image Location`**](#image-location) setting will be dynamically provided using [Page Flow](/app-editor/page-flow). ### `Field Name` {% hint style="warning" %} NOTE: This setting only appears for Image elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design) element. {% endhint %} When the Dynamic Content setting is ON, this setting contains the name of the placeholder field with which the value of the [**`Image Location`**](#image-location) setting will be dynamically provided using [Page Flow](/app-editor/page-flow). {% hint style="info" %} For a general information about images see: {% endhint %} # Spacer

Available under the 'Layout' category, the **`Spacer`** element allows you to add empty vertical space to your page. *** ## Spacer Width The Spacer element always uses the full horizontal area of the parent element it is placed in. Example below shows Spacer0 occupying the full width of the page as it is placed inside the main page body.

Example below shows Spacer1 occupying the width of the layout column it is placed in.

Example Spacer using width of a layout column

*** ## Vertical Sizing

You can resize by using the rectangular notches that appear when you select the element. # Flexible Area

The **`Flexible Area`** element is available under the 'Layout' category. In general, elements on a web page can be divided into two categories based on how they occupy horizontal space: 1. Elements that only allow other elements to be positioned above or below them on the page. 2. Elements that allow other elements to be positioned to their left or right, as well as above or below them. The Flexible Area element enables you to arrange elements side by side, even if they would not typically allow such positioning. This element provides the flexibility to create layouts where elements can coexist horizontally, hence the name **`Flexible Area`**. The example below shows Image, [Text](/app-editor/page-editor/editing-text) and [Button](/app-editor/page-editor/built-in-elements/button) elements placed on the page. Since the [Text](/app-editor/page-editor/editing-text) element in default mode occupies the entire horizontal area, the Image and Button elements are rendered above and below that by the browser.

The same elements when placed inside a Flexible Area element get rendered as shown below.

Within the flexible area element, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Inline` When set to *Yes*, allows the elements next to the Flexible Area (not inside), to be rendered to the left or right and above or below it. This setting has no bearing on how the elements placed inside the flexible area get rendered. ### `Horizontal Align` Controls how the elements inside the Flexible Area are spaced horizontally. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Same as Left or Right depending on the [locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale) of the user. * Left: Aligns the elements inside the Flexible Area towards the left. * Center: Aligns the elements inside the Flexible Area towards the center. * Right: Aligns the elements inside the Flexible Area towards the right. * Space Around: Equally distribute the available space before and after each element. * Space Between: Distribute the available space between the elements. ### `Vertical Align` Controls how the elements inside the Flexible Area are spaced vertically. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Same as Stretch on most browsers. * Top: Align the top of the elements together at the top of the Flexible Area. * Center: Align the center of the elements together at the center of the Flexible Area. * Bottom: Align the bottom of the elements together at the bottom of the Flexible Area. * Stretch: Equalizes the height of all the elements. * Baseline: Elements are aligned such that their baselines align. # Layout Container

The **`Layout Container`** element plays an important role when it comes to designing your page. Many other built-in elements make use of the layout container and related elements like [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) and [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) inside them. The layout container contains one or more layout row elements, with each row containing one or more layout column elements. The example below shows a layout container (Container27) with two layout rows (Row26 and Row28). The Row26 layout row has three layout columns and the Row28 layout row has two. (See the page tree view image for spotting these elements).

{% hint style="info" %} The only element that can be added to a layout container is a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row). {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Width` Controls the width of the element based on the following values: * Fixed Sets the width based on that of the element the container is placed in. * Width < 576px : 100% width of the element the layout container is placed in. * Width < 768px: 540px * Width < 992px: 720px * Width < 1200px: 940px * Width >= 1200px: 1140px * Full Width Always occupies 100% width of the element the layout container is placed in. # Layout Row

The **`Layout Row`** element is used to create horizontal groups of [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) elements inside a [Layout Container](/app-editor/page-editor/built-in-elements/layout-container). {% hint style="info" %} The only element that can be added to a layout row is a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column). {% endhint %} The column grouping inside a row can be controlled in two ways or modes: * Default mode: Specify the width on each layout column In this mode the number of columns shown in a horizontal group is determined by the layout column's *Column Width* setting. See [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) for more details. * The *Column Layout Format* setting In this mode, you can set the desired number of rendered columns in a horizontal group at the layout row. See below for more details. {% hint style="info" %} **NOTE:** Each Layout Row will begin a **new** horizontal group of columns. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Horizontal Align` Controls how the layout columns are spaced horizontally. {% hint style="warning" %} This setting is only effective if all the columns together do not occupy the full horizontal width. e.g. a layout row with two columns each set for 25% width. In this case this setting can be used to control how the remaining 50% width is used. {% endhint %} This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Same as Left or Right depending on the [locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale) of the user. * Left: Aligns the layout columns inside the layout row towards the left. * Center: Aligns the layout columns inside the layout row towards the center. * Right: Aligns the layout columns inside the layout row towards the right. * Space Around: Equally distribute the available space before and after each column. * Space Between: Distribute the available space between the columns. ### `Vertical Align` Controls how the columns are spaced vertically. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Equalizes the height of all the columns. * Top: Align the top of the columns together at the top of the row. * Center: Align the center of the columns together at the center of the row. * Bottom: Align the bottom of the column together at the bottom of the row. {% hint style="info" %} You can override this setting for a specific [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) using its [Vertical Align](/app-editor/page-editor/built-in-elements/layout-column#vertical-align) setting. {% endhint %} ### `Column Layout Format` Allows you to specify the column grouping at the row itself. Works best when used in conjunction with the value of *Default* for the [*Column Width*](/app-editor/page-editor/built-in-elements/layout-column#column-width) setting of the l[ayout columns](/app-editor/page-editor/built-in-elements/layout-column). This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. {% hint style="warning" %} For this setting, the *Default* value is considered an override for the Desktop, Tablet and Mobile screen sizes. Hence you need to set this explicitly for all screen sizes. {% endhint %} The possible values are either Default or the number of columns with a maximum of 12. Setting the value to Default will make the browser render the [columns](/app-editor/page-editor/built-in-elements/layout-column) based on their individual [*Column Width*](/app-editor/page-editor/built-in-elements/layout-column#column-width) setting. ### `Gutters` Controls the gutters or padding between the columns. The possible values are: * Default: a 15px padding is added on the left and right of columns. The example below shows a row with two columns each having an image. The padding between the columns is seen for both.

* None: The columns are rendered without any padding. The example below shows the same row as above, but this time with the setting value as None. No padding is visible between the columns.

{% hint style="info" %} You can further customize via [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). {% endhint %} # Layout Column

The **`Layout Column`** element is used to divide the horizontal space within a row and create responsive grid layouts. {% hint style="info" %} The layout columns can only be added inside [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) elements. {% endhint %} Within the layout column element, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) can only be added to a [Table Row](/app-editor/page-editor/built-in-elements/table-row), adhering to its designated usage. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Column Width` Sets the width of the layout column. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Inherit: As the name suggests, when this option is used the column width is inherited from either the setting for a smaller screen size (if valid) or the main setting. * Default: Automatically set the column width equally based on the number of columns. e.g. if there are 4 columns, each column occupies 25% of the width. * Auto: Automatically set the column width based on the natural width of the content inside. * Percentage Value: Set the column width based on a percentage of the container width. ### `Horizontal Align` Controls how the content inside the layout column is aligned horizontally. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Inherit from parent element. * Left: Aligns the content towards the left. * Center: Aligns the content towards the center. * Right: Aligns the contents towards the right. ### `Vertical Align` Controls how the column is spaced vertically within the layout row. This setting will override the enclosing [Layout Row's Vertical Align setting](/app-editor/page-editor/built-in-elements/layout-row#vertical-align) for this specific column. The possible values are: * Default: Follow the Vertical Align setting of the enclosing layout row. * Top: Align the top of the column at the top of the enclosing layout row. * Center: Align the center of the column at the center of the enclosing layout row. * Bottom: Align the bottom of the column at the bottom of the enclosing layout row. # 1 Column

The **`1 Column`** element provides a quick way to add a full width single column layout to your page. This is a composite element made up of the following elements: * 1 [Layout Container](/app-editor/page-editor/built-in-elements/layout-container) * 1 [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) inside the layout container. * 1 [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) inside the layout row. * 1 example Text element The following element options options are preset: * Layout Container set for full-width * Layout Row set to center align horizontally and vertically. * Layout Column set to use 100% width at the main setting and overridden to *Default* for the desktop screen size. * Layout Column has a margin at the bottom using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](/app-editor/page-editor/padding-and-margin). Feel free to change the preset options and delete the example Text element. You may also add additional columns to the layout row by: * Using the [Add Column](/app-editor/page-editor/built-in-elements/add-column) Element. * [Cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing layout column. Additional rows can also be added by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing layout row. # 2 Columns

The **`2 Columns`** element provides a quick way to add a full width two column layout to your page. {% hint style="info" %} NOTE: The 2 Columns element has options preset to show the two columns for desktop screen sizes and a single column for all other screens. {% endhint %} This is a composite element made up of the following elements: * 1 [Layout Container](/app-editor/page-editor/built-in-elements/layout-container) * 1 [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) inside the layout container. * 2 [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) elements inside the layout row. * Example Text elements inside the layout columns. The following element options options are preset: * Layout Container set for full-width * Layout Row set to center align horizontally and vertically. * Layout Columns are set to use 100% width at the main setting and overridden to *Default* for the desktop screen size. So this will show a two column view for desktop and single column view for all other screen sizes. * Layout Columns have a margin at the bottom by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](/app-editor/page-editor/padding-and-margin). Feel free to change the preset options and delete the example Text elements. You may also add additional columns to the layout row by: * Using the [Add Column](/app-editor/page-editor/built-in-elements/add-column) Element. * [Cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) one of the existing layout columns. Additional rows can also be added by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing layout row. # 3 Columns

The **`3 Columns`** element provides a quick way to add a full width three column layout to your page. {% hint style="info" %} NOTE: The 3 Columns element has options preset to show the three columns for desktop screen sizes and a single column for all other screens. {% endhint %} This is a composite element made up of the following elements: * 1 [Layout Container](/app-editor/page-editor/built-in-elements/layout-container) * 1 [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) inside the layout container. * 3 [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) elements inside the layout row. * Example Text elements inside the layout columns The following element options options are preset: * Layout Container set for full-width * Layout Row set to center align horizontally and vertically. * Layout Columns are set to use 100% width at the main setting and overridden to *Default* for the desktop screen size. So this will show a three column view for desktop and single column view for all other screen sizes. * Layout Columns have a margin at the bottom by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](/app-editor/page-editor/padding-and-margin). Feel free to change the preset options and delete the example Text elements. You may also add additional columns to the layout row by: * Using the [Add Column](/app-editor/page-editor/built-in-elements/add-column) Element. * [Cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) one of the existing layout columns. Additional rows can also be added by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing layout row. # Add Column

Use the Add Column element to quickly add a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) element to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row). The Layout Column is already preset with: * 100% width at the main setting and overridden to *Default* for the desktop screen size. * Margin at the bottom by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting. For more information on adjusting the spacing see [Padding and Margin](/app-editor/page-editor/padding-and-margin). # Table

The **`Table`** element is used to display tabular data and forms part of the two composite elements in the Page Element Library: [Table (3 cols)](/app-editor/page-editor/built-in-elements/table-3-cols) and [Table (4 cols)](/app-editor/page-editor/built-in-elements/table-4-cols). The table element consists of a table head section and a table body section. The table head section usually contains a single [Table Row](/app-editor/page-editor/built-in-elements/table-row) element with one or more [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) elements. The number heading cells matches the number of columns you need. {% hint style="success" %} NOTE: The table head section can contain more than one table row element. {% endhint %} The table body section usually contains one or more [Table Row](/app-editor/page-editor/built-in-elements/table-row) elements, each of which contain [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Borders` Controls the type of borders shown for the table. The possible values are: * Default Separates each row of the table with a horizontal line. * Disabled Displays the table without any borders * Enabled Displays the table with borders ### `Compact Spacing` When ON, reduces the padding inside each heading and column cell to give the table a compact look. ### `Striped Rows` Render alternate rows using a gray background to give the table a striped look. {% hint style="info" %} You can further customize your table via [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). {% endhint %} # Table Row

The **`Table Row`** element represents a row of information inside a [Table](/app-editor/page-editor/built-in-elements/table) element. A table row contains one or more columns in the form of [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) or [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements. {% hint style="info" %} A **`Table Row`** can only be added to the table head or table body sections. Additionally the only elements that can be added to the table row are [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) or [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) . {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Hover` Controls what happens when the mouse hovers over any part of the row. The possible values are: * Disabled This is the default setting with no changes. * Enabled The entire row is given a gray background. * Clickable The row is rendered using a gray background and the mouse cursor is changed to a pointer. ### `Look` Provides a list of pre-defined background colors to use for the row. You can also customize the background color or any other design attribute via [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). # Table Column Cell

Use the **`Table Column Cell`** to add columns to a table. {% hint style="info" %} The **`Table Column Cell`** can only be added to a [Table Row](/app-editor/page-editor/built-in-elements/table-row) element. {% endhint %} The **`Table Column Cell`** is usually added to rows inside the table's body section, but it can also be added to rows inside the table head section if required. Within the table column cell element, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage. *** ## Setting Table Column Cell Width You can set the width of the table column cell in the following ways: * [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) * Via the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) by setting the Width available in the Sizing category. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Hover` Controls what happens when the mouse hovers over any part of the column. The possible values are: * Disabled This is the default setting with no changes. * Enabled The entire row is given a gray background. * Clickable The column is rendered using a gray background and the mouse cursor is changed to a pointer. ### `Look` Provides a list of pre-defined background colors to use for the column. You can also customize the background color or any other design attribute via [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). ### `Column Span` A numeric value (greater than 1) indicating the number of columns the cell extends. If not set, it is assumed to be 1. See [here](https://en.wikipedia.org/wiki/Table_cell) for more information. ### `Row Span` A numeric value (greater than 1) indicating the number of rows the cell extends. If not set, it is assumed to be 1. If set to 0, it extends the column across all the rows of the section. {% hint style="info" %} When the Row Span is set to 0, the column will be extended across all the rows in the section where the column is. e.g. if the column were inside a row of the head section, then this column will extend to all rows in the head section. {% endhint %} See [here](https://en.wikipedia.org/wiki/Table_cell) for more information. # Table Heading Cell

Use the **`Table Heading Cell`** to add heading columns to a table. {% hint style="info" %} The **`Table Heading Cell`** can only be added to a [Table Row](/app-editor/page-editor/built-in-elements/table-row) element. {% endhint %} The **`Table Heading Cell`** is usually added to rows inside the table's head section, but it can also be added to rows inside the table body section if required. Within the table heading cell element, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage. *** ## Setting Heading Cell Width You can set the width of the table heading cell in the following ways: * [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) * Via the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) by setting the Width available in the Sizing category. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Hover` Controls what happens when the mouse hovers over any part of the column. The possible values are: * Disabled This is the default setting with no changes. * Enabled The entire row is given a gray background. * Clickable The column is rendered using a gray background and the mouse cursor is changed to a pointer. ### `Look` Provides a list of pre-defined background colors to use for the column. You can also customize the background color or any other design attribute via [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). ### `Column Span` A numeric value (greater than 1) indicating the number of columns the cell extends. If not set, it is assumed to be 1. See [here](https://en.wikipedia.org/wiki/Table_cell) for more information. ### `Row Span` A numeric value (greater than 1) indicating the number of rows the cell extends. If not set, it is assumed to be 1. If set to 0, it extends the column across all the rows of the section. {% hint style="info" %} When the Row Span is set to 0, the column will be extended across all the rows in the section where the column is. e.g. if the column were inside a row of the head section, then this column will extend to all rows in the head section. {% endhint %} See [here](https://en.wikipedia.org/wiki/Table_cell) for more information. ### `Scope` Allows you to specify whether this cell relates to a row or column. Please note that this has no visual effect, but can be used by screen readers. The possible values are: * Default Automatically determined by the browser * Row Specifies that this cell is a header for a row. * Column Specifies that this cell is a header for a column. # Table (3 cols)

The **`Table (3 cols)`** element provides a quick way to add a table with 3 columns with some sample information. This is a composite element made up of the following elements: * 1 [Table](/app-editor/page-editor/built-in-elements/table) * 1 [Table Row](/app-editor/page-editor/built-in-elements/table-row) in the head section with 3 [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) elements. * 2 [Table Row](/app-editor/page-editor/built-in-elements/table-row) elements in the body section each with 3 [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements . * Text elements inside each of the [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) and [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements. Feel free to delete sample Text elements. You may also add: * Column cells using the [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing column cells. * Heading cells using the [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing heading cells. * Rows using [Table Row](/app-editor/page-editor/built-in-elements/table-row) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing rows. # Table (4 cols)

The **`Table (4 cols)`** element provides a quick way to add a table with 4 columns with some sample information. This is a composite element made up of the following elements: * 1 [Table](/app-editor/page-editor/built-in-elements/table) * 1 [Table Row](/app-editor/page-editor/built-in-elements/table-row) in the head section with 4 [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) elements. * 2 [Table Row](/app-editor/page-editor/built-in-elements/table-row) elements in the body section each with 4 [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements . * Text elements inside each of the [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) and [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) elements. Feel free to delete sample Text elements. You may also add: * Column cells using the [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing column cells. * Heading cells using the [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing heading cells. * Rows using [Table Row](/app-editor/page-editor/built-in-elements/table-row) element or by [cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) existing rows. # Input

Use the **`Input`** element to interact with users and accept data. This element is also part of the [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) composite elements, where the Type is set to *Checkbox* (see below). {% hint style="success" %} If you are designing a Form, you can use the automatically created Data Field Input elements to accept data from the user. See [Working with Forms](/app-editor/page-editor/working-with-forms) for more information. The **`Input`** element is a part of the Data Field Input composite elements. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Type` Controls the type and design of the element. The possible values are: * Text: Accepts any general input. * Date Accepts a date in the format set in the user's locale. e.g. MM/DD/YYYY/etc. Most modern browsers will show a date picker to allow the user to conveniently pick a date. * Date/Time Accepts a date and time in the format set in the user's locale e.g. MM/DD/YYYY/etc. Most modern browsers will show a date and time picker. * Time Accepts the time in the format set in the user's locale. Most modern browsers will show a time picker. * Week Allows the user to select a week. For more information see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week). Safari and Firefox browsers do not support this currently. * Month Allows the user to select a month. For more information see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month). Safari and Firefox browsers do not support this currently. * URL Accepts a URL. * Number Accepts a numeric value. You can use this in conjunction with *Numeric/Range Min* and *Numeric/Range Max* settings. * Phone Accepts a phone number. * Email Accepts an email address. * Password Accepts a password. * Color Picker Shows a color picker. * Range Use this in conjunction *Numeric/Range Min* and *Numeric/Range Max* settings to show a slider. * Checkbox Shows a checkbox. This is used internally by the [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) composite elements. ### `Title` Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element. ### `Place Holder` Enter the text you want displayed inside the element as a hint to the user. The place holder appears only when the element is empty and automatically disappears when the user types inside the element. ### `Initial Value` If you want the element to already have an entered value, you set it here. ### `Autocomplete` Allows you to provide a hint to the browser's autocomplete functionality. Possible values are: * Default Use the browser's default behavior for the current user. * off Suggest the browser to not use autocomplete for this element. * on Suggest the browser to use autocomplete for this element. ### `Numeric/Range Min` For elements with the Type setting of Numeric or Range, you can specify the minimum allowed value. ### `Numeric/Range Max` For elements with the Type setting of Numeric or Range, you can specify the maximum allowed value. ### `Form Field Name` If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element. ### `Mandatory` Set this to *yes* If you want to make sure a valid data is entered for this element. This is used in [forms](/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page. ### `Form Control` This is used in [forms](/app-editor/page-editor/working-with-forms) and adds a consistent design/style to your input element. Additionally this also enables [feedback control for the element](/app-editor/page-flow/toolbox-blocks/set-input-feedback) so that you can communicate whether the value is valid or invalid. Use this in conjunction with the *Form Control Size* setting. ### `Form Control Size` Use this in conjunction with the *Form Control* setting. Control the size of the input element. # Checkbox

The **`Checkbox`** element is a composite element consisting of an [Input](/app-editor/page-editor/built-in-elements/input) element and a [Label](/app-editor/page-editor/built-in-elements/label) element. The included [Label](/app-editor/page-editor/built-in-elements/label) element is preconfigured with its [Associated Input ID](/app-editor/page-editor/built-in-elements/label#associated-input-id) set to the [Element ID](/app-editor/page-editor/page-element-settings#advanced-tab) of the included [Input](/app-editor/page-editor/built-in-elements/input) element. {% hint style="warning" %} [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) elements, used inside a Data Design element, need to be initialized using the [Initialize Toggle Switch in Data Design](/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design) block, after they are added to the page or form. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: {% hint style="danger" %} We do not recommend changing any setting other than the one's mentioned below. {% endhint %} ### `Title` Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element. ### `Form Field Name` If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element. ### `Mandatory` Set this to *yes* If you want to make sure a valid data is entered for this element. This is used in [forms](/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page. # Toggle Switch

The **`Toggle Switch`** element is a composite element consisting of an [Input](/app-editor/page-editor/built-in-elements/input) element and a [Label](/app-editor/page-editor/built-in-elements/label) element. It is similar to the [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) element, but renders the element as a switch that can be turned on or off. The included [Label](/app-editor/page-editor/built-in-elements/label) element is preconfigured with its [Associated Input ID](/app-editor/page-editor/built-in-elements/label#associated-input-id) set to the [Element ID](/app-editor/page-editor/page-element-settings#advanced-tab) of the included [Input](/app-editor/page-editor/built-in-elements/input) element. For customization options please see the [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) element. {% hint style="warning" %} [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) elements, used inside a Data Design element, need to be initialized using the [Initialize Toggle Switch in Data Design](/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design) block, after they are added to the page or form. {% endhint %} # Dropdown

The **`Dropdown`** element allows the user to make a selection from a list of options. In Forms, the **`Dropdown`** automatically gets used for the Data Field elements where the **`Type`** is *Text* and **`Sub-Type`** is *List of Values*. Click [here](/app-editor/page-editor/working-with-forms#automatic-data-field-input-elements) for more information. The list of dropdown options is configurable via the settings for the element, which are described in detail below. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Dropdown Options` Allows you to add, edit and remove options from the dropdown. You can also reorder the options based on how you would like it to be presented to the user. Each selectable option consists of a Display Text and a Value. The Value can be blank or empty, but the Display Text is mandatory. The Display Text is shown in the list of options, with the Value being used when this specific option is selected. If this element is marked as mandatory, selecting an option with an empty value will mark selection as invalid. ### `Title` Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element. ### `Searchable` Select yes if you want this element to allow the user to select an option quickly using text search. This is useful if you plan on having a long list of selectable options. ### `Form Field Name` If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element. ### `Mandatory` Set this to *yes* If you want to make sure a valid selection is made. This is used in [forms](/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page. ### `Form Control` This is used in [forms](/app-editor/page-editor/working-with-forms) and adds a consistent design/style to the element. Additionally this also enables [feedback control for the element](/app-editor/page-flow/toolbox-blocks/set-input-feedback) so that you can communicate whether the value is valid or invalid. Use this in conjunction with the *Form Control Size* setting. ### `Form Control Size` Use this in conjunction with the *Form Control* setting. Control the size of the element. # Multi-line

Use the **`Multi-line`** element to interact with users and accept text that can span multiple lines. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Lines (rows)` This controls the initial height of the element. The user is allowed to extend the element if required. Enter the number of lines of text you want the element to have initially. ### `Character Width (cols)` This controls the initial with of the element. The user is allowed to extend the element if required. Enter the number of characters on a line. Please note that this does not apply if you select [Form Control](#form-control) as *yes*. ### `Rich Text` Select yes, if you want to allow the user to format the text they type inside the element. When enabled, the element is shown with a editing toolbar that allows the commonly found formatting functionalities like bold, underline, etc. When you select Rich Text, the height of the element is based on the Lines (rows) setting above. ### `Title` Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element. ### `Place Holder` Enter the text you want displayed inside the element as a hint to the user. The place holder appears only when the element is empty and automatically disappears when the user types inside the element. ### `Autocomplete` Allows you to provide a hint to the browser's autocomplete functionality. Possible values are: * Default Use the browser's default behavior for the current user. * off Suggest the browser to not use autocomplete for this element. * on Suggest the browser to use autocomplete for this element. ### `Form Field Name` If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element. ### `Mandatory` Set this to *yes* If you want to make sure a valid data is entered for this element. This is used in [forms](/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page. ### `Form Control` This is used in [forms](/app-editor/page-editor/working-with-forms) and adds a consistent design/style to your input element. Additionally this also enables [feedback control for the element](/app-editor/page-flow/toolbox-blocks/set-input-feedback) so that you can communicate whether the value is valid or invalid. Use this in conjunction with the *Form Control Size* setting. ### `Form Control Size` Use this in conjunction with the *Form Control* setting. Control the size of the input element. # Label

The **`Label`** element is used as a label or title for the interactive elements like [Input](/app-editor/page-editor/built-in-elements/input), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown), [Multi-line](/app-editor/page-editor/built-in-elements/multi-line), etc and it is part of composite interactive elements like [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch). Additionally the Label element is also part of Data Field composite elements which are used in [Forms](/app-editor/page-editor/working-with-forms). It behaves similar to [Inline Text](/app-editor/page-editor/editing-text#inline-text) element, and allows you to edit text. See [Editing Text](/app-editor/page-editor/editing-text) for more information. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Associated Input ID` {% hint style="success" %} The Associated Input ID is preset in several composite elements like [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch), and Data Field composite elements used in [Forms](/app-editor/page-editor/working-with-forms). {% endhint %} This setting associates this label element with its associated input element like [Input](/app-editor/page-editor/built-in-elements/input), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown), [Multi-line](/app-editor/page-editor/built-in-elements/multi-line), [Checkbox](/app-editor/page-editor/built-in-elements/checkbox), [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch), etc. You provide the [Element ID](/app-editor/page-editor/page-element-settings#advanced-tab) of the associated element here. # Button

Use the **`Button`** element when you need the user to trigger an action on your page. This action can encompass a variety of tasks such as form submission or data processing. With [Page Flow](/app-editor/page-flow), you can define the desired actions. If you're working with forms, there is already a pre-configured Submit button element available to conveniently submit your form. Additionally a pre-configured Reset button is also available to clear the contents of all the field inputs. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Button Content` Specify what you want the button to say using this setting. You can enter some simple HTML code here. We also support [Font Awesome 6](https://fontawesome.com/v6/search?o=r\&m=free) icons. ### `Button Look` Select from a pre-defined list of background and text colors for the button look. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Button Size` Select from a pre-defined list of sizes. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Button Action` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-toggle`** attribute. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements use this by setting the value to ***`dropdown`***. You can also use this to control a [Collapsible Area](/app-editor/page-editor/built-in-elements/collapsible-area) element by setting the value to ***`collapse`***. ### `Action Target` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-target`** attribute. The value is set to the Element ID of the element to be controlled. To find the Element ID see [here](/app-editor/page-editor/page-element-settings#advanced-tab). {% hint style="info" %} The Element ID needs to be prefixed with a # character. This is also known as ID selector syntax. For more information click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors). {% endhint %} ### `Popup Menu Icon` Enable this if you want a :arrow\_down\_small:arrow to appear next to the content to indicate that it will invoke a popup menu. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements turn this setting on. # Button Group

The **`Button Group`** element allows you to group multiple buttons together. It provides a way to visually organize related buttons and size them as a cohesive unit. The image below shows examples of button groups: * Button group with 4 buttons and the *Size* option set to small. * Button group with 3 buttons and the *Size* option set to large. * Button group with the *Type* option set to vertical.

*** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Size` Set the size of the buttons to override the [Size setting](/app-editor/page-editor/built-in-elements/button#button-size) of individual buttons. If the value of this setting is Default, the button group is rendered based on the largest sized button in the group. ### `Type` By default, a button group is rendered in horizontal orientation. You can also have the button vertically oriented by choosing the Vertical setting. ### `Popup Menu Direction` When used in the composite [Popup Menu1](/app-editor/page-editor/built-in-elements/popup-menu-style1) and [Popup Menu2](/app-editor/page-editor/built-in-elements/popup-menu-style2) elements, you can specify the location where the menu opens when clicked. # Input Group

The **`Input Group`** is a composite element consisting of: * **`IG Left Block`** containing a **`IG Label`** element that can be edited. * A sample [Input](/app-editor/page-editor/built-in-elements/input) element. * **`IG Right Block`** containing a **`IG Label`** element that can be edited. The input group element is fully customizable. Here are some examples: * You can replace the IG Label blocks with one or more [Input](/app-editor/page-editor/built-in-elements/input), [Multi-line](/app-editor/page-editor/built-in-elements/multi-line), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown), [Checkbox](/app-editor/page-editor/built-in-elements/checkbox), [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch), [Button](/app-editor/page-editor/built-in-elements/button) elements. * You can choose to delete the IG Left Block or the IG Right Block * You can replace the sample [Input](/app-editor/page-editor/built-in-elements/input) element with one or more [Multi-line](/app-editor/page-editor/built-in-elements/multi-line), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown), [Checkbox](/app-editor/page-editor/built-in-elements/checkbox), [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch), [Button](/app-editor/page-editor/built-in-elements/button) elements or add additional [Input](/app-editor/page-editor/built-in-elements/input) elements. The image below shows example of various ways you could use the Input Group element (from top to bottom, left to right): * Input group with IG Label elements in IG Left Block and IG Right Block elements, and a standard [Input](/app-editor/page-editor/built-in-elements/input) element inside it. * Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) element inside it. * Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Input](/app-editor/page-editor/built-in-elements/input) and [Button](/app-editor/page-editor/built-in-elements/button) elements inside it. * Input group with IG Label element in IG Left Block, a [Button](/app-editor/page-editor/built-in-elements/button) inside the IG Right Block element and [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) element inside it. * Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Multi-line](/app-editor/page-editor/built-in-elements/multi-line) element inside it.

Example of the various ways you can customize the Input Group

The input group elements can be added to the [Button Toolbar](/app-editor/page-editor/built-in-elements/button-toolbar) element along with button group elements to create a cohesive multi-functional toolbar for your app. The Input Group element normally occupies the full width of the parent element it is placed in. You can customize this behavior by: * Specify the built-in CSS class **`w-auto`** in the [Custom CSS Classes setting](/app-editor/page-editor/page-element-settings#custom-css-classes). * Use your own CSS class that sets the element's width in the [Custom CSS Classes setting](/app-editor/page-editor/page-element-settings#custom-css-classes). * Use [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) and specify a width. {% hint style="info" %} To add text to the Input Group, use the IG Label element. {% endhint %} # Button Toolbar

The **`Button Toolbar`** element allows you to group multiple [Button Group](/app-editor/page-editor/built-in-elements/button-group) and [Input Group](/app-editor/page-editor/built-in-elements/input-group) elements horizontally. There can be more than one button group and/or input groups and the button groups can have any number of buttons. The example image below shows a button toolbar with: * [Input Group](/app-editor/page-editor/built-in-elements/input-group) with [Input](/app-editor/page-editor/built-in-elements/input) element. * [Button Group](/app-editor/page-editor/built-in-elements/button-group) with three [Button](/app-editor/page-editor/built-in-elements/button) elements. * [Input Group](/app-editor/page-editor/built-in-elements/input-group) with [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) element.

A Button Toolbar with Input groups and Button Group

It makes it easy to create visually appealing and functional toolbars for your Zingy app. To control the horizontal alignment use the Button Toolbar element inside a [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area) and use the [Horizontal Align](/app-editor/page-editor/built-in-elements/flexible-area#horizontal-align) setting. # Menubar Holder The purpose of the **`Menubar Holder`** element is to serve as a container for either a [Menubar](/app-editor/page-editor/built-in-elements/menubar) element or a [Menubar Collapsible](/app-editor/page-editor/built-in-elements/menubar-collapsible) element that contains the Menubar element within it. It's important to note that the **`Menubar Holder`** element cannot be directly found in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag and drop functionality. Instead, you can utilize the pre-designed responsive solutions offered by the [Menubar Style1](/app-editor/page-editor/built-in-elements/menubar-style1) and [Menubar Style2](/app-editor/page-editor/built-in-elements/menubar-style2) elements, which already include the Menubar Holder functionality. By using these elements, you can easily incorporate the Menubar Holder and its associated components into your web page. The Menubar Holder element allows you to control: * The text color (light or dark) of the [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements inside the Menubar (see the Options section below). * The background color by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting or the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). * The screen-sizes for which the menu will be shown by specifying one of the following classes in the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting: * *`navbar-expand-lg`* The menu is shown horizontally expanded for screen widths 992px or greater. * *`navbar-expand-md`* The menu is shown horizontally expanded for screen widths 768px or greater. * *`navbar-expand-sm`* The menu is shown horizontally expanded for screen widths 576px or greater. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Background Style` This setting allows you to specify the general color scheme you intend to use for your menubar. * Default Does not change the text color attributes of the contained menu items. * Light Renders the contained menu items in a dark text color. The menu items marked with the [Activated Look](/app-editor/page-editor/built-in-elements/menubar-item#activated-look) setting are shown in a more distinctly dark text color. * Dark Renders the contained menu items in a light text color. The menu items marked with the [Activated Look](/app-editor/page-editor/built-in-elements/menubar-item#activated-look) setting are shown in a more distinctly light text color. {% hint style="info" %} NOTE: You would still need to set the actual back-ground color of the menu bar using one of the following: * Use your own CSS class in the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting for this element. * Choose the background color in the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) for this element. {% endhint %} # Menubar Collapsible The **`Menubar Collapsible`** element offers the ability to hide the menubar based on specific screen sizes and allows you to control its visibility using a button or other custom methods. Please note that you won't find the **`Menubar Collapsible`** element directly available in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the pre-designed responsive solutions provided by the [Menubar Style1](/app-editor/page-editor/built-in-elements/menubar-style1) and [Menubar Style2](/app-editor/page-editor/built-in-elements/menubar-style2) elements, which contain the Menubar Collapsible element. To incorporate the Menubar Collapsible element, you need to place the [Menubar](/app-editor/page-editor/built-in-elements/menubar) within this element and then insert this element into the [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder) element. Fortunately, the [Menubar Style1](/app-editor/page-editor/built-in-elements/menubar-style1) and [Menubar Style2](/app-editor/page-editor/built-in-elements/menubar-style2) elements already handle this arrangement for you. For determining the screen sizes where the menubar should be displayed, please refer to the documentation of the [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder) element. It provides instructions on specifying the desired screen sizes for menubar visibility. # Menubar The **`Menubar`** element serves the purpose of constructing a primary menu for your application by incorporating one or more [Menu Item](/app-editor/page-editor/built-in-elements/menu-item), [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu), or [Menubar Login Info](/app-editor/page-editor/built-in-elements/menubar-login-info) elements. It's important to note that the **`Menubar`** element cannot be directly accessed in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the pre-built responsive solutions offered by the [Menubar Style1](/app-editor/page-editor/built-in-elements/menubar-style1) and [Menubar Style2](/app-editor/page-editor/built-in-elements/menubar-style2) elements, which already include the Menubar functionality. By utilizing these elements, you can easily incorporate the Menubar and its associated elements into your web page. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Horizontal Align` Controls how the elements inside the contents of the Menubar are spaced horizontally. This setting has [responsive design](/app-editor/page-editor/responsive-design) support for various screen sizes: Main (overall), Desktop, Tablet and Mobile. The desktop, tablet and mobile versions of this setting override the Main setting. The possible values are: * Default: Same as Left or Right depending on the [locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale) of the user. * Left: Aligns the contents towards the left. * Center: Aligns the contents towards the center. * Right: Aligns the contents towards the right. * Space Around: Equally distribute the available space before and after each element inside the Menubar. * Space Between: Distribute the available space between the elements inside the Menubar. ### `Scrollable Content` Enable this if the content inside your Menubar exceeds the dimensions of the page and you require the ability to scroll. # Menubar Item The **`Menubar Item`** element is used to represent a menu entry within a [Menubar](/app-editor/page-editor/built-in-elements/menubar) component. Typically, it includes the editable [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element, but you have the flexibility to add various other elements to it. For example, you can include elements such as [Input](/app-editor/page-editor/built-in-elements/input), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown), [Button](/app-editor/page-editor/built-in-elements/button), or [Image](/app-editor/page-editor/built-in-elements/image) within the Menubar Item element. This allows you to customize the content of each menu item according to your specific needs. It's important to note that the **`Menubar Item`** element cannot be directly accessed in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the following pre-built elements: * [Menu Item](/app-editor/page-editor/built-in-elements/menu-item): This has a [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element, which can be edited and configured. * [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu): This adds a sub-menu to the menubar which can be customized. * [Menubar Login Info](/app-editor/page-editor/built-in-elements/menubar-popup-menu): This adds a widget that shows information about the current logged-in user to your app. {% hint style="info" %} To add a **`Menubar Item`** element containing custom content, you can utilize the [Menu Item](/app-editor/page-editor/built-in-elements/menu-item) element by removing the default [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) and replacing it with other desired elements. This allows you to incorporate custom content within the Menubar Item according to your specific requirements. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Activated Look` This setting works in conjunction with the [Background Style](/app-editor/page-editor/built-in-elements/menubar-holder#background-style) setting of the [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder) element: * Default: This setting will have no effect. * Light: Renders the element in a more distinctly dark text color. * Dark: Renders the element in a more distinctly light text color. ### `Contains Popup Menu` This setting is used to indicate that the element contains a popup menu or a sub-menu. This setting is automatically turned ON for the [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) element. ### `Popup Menu Direction` Control the direction in which the popup-menu or sub-menu will open when the element is clicked. This setting is only used if the element contains a popup-menu or a sub-menu and has the [Contains Popup Menu](#contains-popup-menu) option turned on. # Menubar Item Link The **`Menubar Item Link`** element is similar to the [Link](/app-editor/page-editor/built-in-elements/link) element, but is used inside [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements. It's important to note that the **`Menubar Item Link`** element cannot be directly accessed in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the following pre-built elements: * [Menu Item](/app-editor/page-editor/built-in-elements/menu-item): This has a [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element, which can be edited and configured. * [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu): This adds a sub-menu to the menubar which can be customized. * [Menubar Login Info](/app-editor/page-editor/built-in-elements/menubar-popup-menu): This adds a widget that shows information about the current logged-in user to your app. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `HRef` Sets the destination URL. The URL can be external to other websites or internal to other pages of your app. {% hint style="info" %} Using [Page Flow](/app-editor/page-flow), you can define custom actions instead of navigating to the URL. {% endhint %} ### `Target` Choose whether you want to open the URL in a new tab/page or in the same page. ### `Link Action` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-toggle`** attribute. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements use this by setting the value to ***`dropdown`***. You can also use this to control a [Collapsible Area](/app-editor/page-editor/built-in-elements/collapsible-area) element by setting the value to ***`collapse`***. ### `Action Target` This is an advanced parameter that translates to the [Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/introduction/) **`data-target`** attribute. The value is set to the Element ID of the element to be controlled. To find the Element ID see [**here**](/app-editor/page-editor/page-element-settings#advanced-tab). {% hint style="info" %} The Element ID needs to be prefixed with a # character. This is also known as ID selector syntax. For more information click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors). {% endhint %} ### `Popup Menu Icon` Enable this if you want a :arrow\_down\_small:arrow to appear next to the link to indicate that it will invoke a popup menu. The [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1), [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) and [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) elements turn this setting on. # Menubar Style1

The **`Menubar Style1`** is a pre-designed element that offers a complete and customizable top-level menu structure for your application.

This composite element is composed of the following elements arranged in a single row: * A left-aligned placeholder text to be replaced with a logo [Image](/app-editor/page-editor/built-in-elements/image) element or anything else depending on your needs. * A responsive menu consisting of: * [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder) * [Menubar Collapsible](/app-editor/page-editor/built-in-elements/menubar-collapsible) * [Menubar](/app-editor/page-editor/built-in-elements/menubar) with two example [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements consisting of [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) elements. * A [Button](/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) . This button is responsible for controlling the Menubar Collapsible element and displaying the Menubar. It automatically appears on smaller screen sizes. {% hint style="success" %} Note: The [Button](/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) becomes visible in the [Page Content Area](/app-editor/page-editor/page-editor-tour#page-content-area) when you switch to Tablet or Mobile view using the buttons in the [Page Content Toolbar](/app-editor/page-editor/page-editor-tour#page-content-toolbar). {% endhint %} Using the Menubar Style1 element, you can easily implement a fully functional and adaptable top-level menu for your app, and it can be further customized to suit your specific requirements. {% hint style="info" %} You can add more entries to the [Menubar](/app-editor/page-editor/built-in-elements/menubar) by: * Dropping [Menu Item](/app-editor/page-editor/built-in-elements/menu-item) elements * [Cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements. {% endhint %} # Menubar Style2

The **`Menubar Style2`** is a pre-designed element that offers a complete and customizable top-level menu structure for your application.

This composite element is composed of the following elements arranged in two rows: * The first row with a center-aligned placeholder text that can be replaced with logo [Image](/app-editor/page-editor/built-in-elements/image) element or anything else depending on your needs. * A second row with a responsive menu consisting of: * [Menubar Holder](/app-editor/page-editor/built-in-elements/menubar-holder) * [Menubar Collapsible](/app-editor/page-editor/built-in-elements/menubar-collapsible) * [Menubar](/app-editor/page-editor/built-in-elements/menubar) with two example [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements consisting of [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) elements. * A [Button](/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) . This button is responsible for controlling the Menubar Collapsible element and displaying the Menubar. It automatically appears on smaller screen sizes. {% hint style="success" %} Note: The [Button](/app-editor/page-editor/built-in-elements/button) element with a [Hamburger icon](https://en.wikipedia.org/wiki/Hamburger_button) becomes visible in the [Page Content Area](/app-editor/page-editor/page-editor-tour#page-content-area) when you switch to Tablet or Mobile view using the buttons in the [Page Content Toolbar](/app-editor/page-editor/page-editor-tour#page-content-toolbar). {% endhint %} Using the Menubar Style2 element, you can easily implement a fully functional and adaptable top-level menu for your app, and it can be further customized to suit your specific requirements. {% hint style="info" %} You can add more entries to the [Menubar](/app-editor/page-editor/built-in-elements/menubar) by: * Dropping [Menu Item](/app-editor/page-editor/built-in-elements/menu-item) elements * [Cloning](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) the existing [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) elements. {% endhint %} # Menu Item

Use the **`Menu Item`** element to add a menu entry to your app's [Menubar](/app-editor/page-editor/built-in-elements/menubar).

This composite element consists of a [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) inside the [Menubar Item](/app-editor/page-editor/built-in-elements/menubar-item) . You can customize this element by editing the text and the destination URL. # Popup Menu The **`Popup Menu`** element provides a user-friendly way to display a list of options or actions that can be accessed by clicking a trigger element. The trigger element is usually a [Button](/app-editor/page-editor/built-in-elements/button) element or a [Link](/app-editor/page-editor/built-in-elements/link) element. The list of options is created by adding [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item) elements to the popup menu element. You can also add the [Popup Menu Separator](/app-editor/page-editor/built-in-elements/popup-menu-separator) item to group sets of cohesive options. It's important to note that the **`Popup Menu`** element cannot be directly found in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag and drop functionality. Instead, you can utilize the following composite elements which include it: * [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1) * [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) * [Menubar Popup Menu](/app-editor/page-editor/built-in-elements/menubar-popup-menu) {% hint style="success" %} NOTE: For dynamically presenting a popup-menu you can use the [Show Menu](/app-editor/page-flow/toolbox-blocks/show-menu) block in [Page Flow](/app-editor/page-flow). {% endhint %} # Popup Menu Item

The **`Popup Menu Item`** element is similar to the [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element, but is used inside [Popup Menu](/app-editor/page-editor/built-in-elements/popup-menu) elements.

*** ## Options For settings that are part of the [Options tab](/app-editor/page-editor/page-element-settings#options-tab) for this element settings please refer to the options for the [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element. # Menubar Popup Menu

Use the **`Menubar Popup Menu`** element to add a sub-menu to your [Menubar](/app-editor/page-editor/built-in-elements/menubar).

A Menubar Style1 with a menu bar popup menu.

The Menubar Popup Menu is composed of a Menubar Item element with: * [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) element configured to trigger the visibility of the popup menu. * [Popup Menu](/app-editor/page-editor/built-in-elements/popup-menu) element with some sample [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item) and [Popup Menu Separator](/app-editor/page-editor/built-in-elements/popup-menu-separator) elements. You can customize the element by editing the text, the destination URLs, adding more [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item) elements. # Popup Menu Style1

The **`Popup Menu Style1`** is a pre-designed composite element that combines a [Popup Menu](/app-editor/page-editor/built-in-elements/popup-menu) with sample entries along with a [Link](/app-editor/page-editor/built-in-elements/link) element that triggers the visibility of the menu. You can customize it by changing the link element's text and the entries in the popup menu. This element is similar in many ways to the [Popup Menu Style2](/app-editor/page-editor/built-in-elements/popup-menu-style2) element which uses a [Button](/app-editor/page-editor/built-in-elements/button) element as a trigger.

# Popup Menu Style2

The **`Popup Menu Style2`** is a pre-designed composite element that combines a [Popup Menu](/app-editor/page-editor/built-in-elements/popup-menu) with sample entries along with a [Button](/app-editor/page-editor/built-in-elements/button) element that triggers the visibility of the menu. You can customize it by changing the button element's design/text and the entries in the popup menu. This element is similar in many ways to the [Popup Menu Style1](/app-editor/page-editor/built-in-elements/popup-menu-style1) element which uses a [Button](/app-editor/page-editor/built-in-elements/link) element as a trigger.

# Popup Menu Separator

This **`Popup Menu Separator`** helps organize and visually distinguish different sections or groups of [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item) elements within a [Popup Menu](/app-editor/page-editor/built-in-elements/popup-menu). # Card The **`Card`** is a versatile and flexible element. It is used to create visually appealing and structured sections to display various types of content, such as text, images, and buttons. A **`Card`** typically encompasses a box-shaped section and offers options for incorporating Card Header, Card Body, and Card Footer elements which are described below. You can add elements directly to the card or inside the contained header, body and footer elements. You can place the card anywhere on your page. If you need to show a group of related cards together on a page, please see [Card Group](/app-editor/page-editor/built-in-elements/card-group). *** ### Card Header The **`Card Header`** element enhances the appearance of a card by providing a padded section with a light gray background. It features a border at the bottom to visually distinguish it from other sections within the card. Typically, the card header is positioned near the top of the card, but it can be placed anywhere within the card structure. To customize the card header, you have the flexibility to modify its background color or any other aspect by either adding [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or utilizing the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab), which offers additional styling options. *** ### Card Body The **`Card Body`** element adds a padded section to the card and is designed to contain the main content of the card. It ensures that the main content of the card is appropriately separated and visually distinguished from other card sections, such as the card header and card footer. To customize the card body, you have the flexibility to modify its background color or any other aspect by either adding [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or utilizing the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab), which offers additional styling options. *** ### Card Footer The **`Card Footer`** element serves the purpose of creating a dedicated section at the bottom of a card, allowing you to incorporate supplementary content or actions that are directly associated with the card. It enhances the visual structure by adding a padded section with a light gray background and a top border, effectively separating it from other card sections. To customize the appearance of the card footer, you have the flexibility to modify various aspects, including its background color and other properties. This can be achieved by either adding [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) or utilizing the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab), which provides additional styling options and control over the card footer's visual presentation. {% hint style="info" %} The **`Card`**, **`Card Header`**, **`Card Body`** and **`Card Footer`** elements cannot be directly accessed in the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library) for drag-and-drop functionality. Instead, you can utilize the pre-built responsive solutions offered by [Card Style1](/app-editor/page-editor/built-in-elements/card-style1), [Card Style2](/app-editor/page-editor/built-in-elements/card-style2) and [Card Style3](/app-editor/page-editor/built-in-elements/card-style3) elements. {% endhint %} {% hint style="success" %} Within the card, card header, card body and card footer elements, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage. {% endhint %} # Card Group

The **`Card Group`** is a pre-built responsive element that is designed to show a group of related [Card](/app-editor/page-editor/built-in-elements/card) elements. The element is composed of 1 [Layout Container](/app-editor/page-editor/built-in-elements/layout-container) element with: * 1 [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) configured to show a 3 column layout for larger screens and a single column layout for smaller screens (via its [Column Layout Format](/app-editor/page-editor/built-in-elements/layout-row#column-layout-format) setting). * 3 [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) elements inside the Layout Row. To add cards into the group, simple drag and drop the [Card Style1](/app-editor/page-editor/built-in-elements/card-style1), [Card Style2](/app-editor/page-editor/built-in-elements/card-style2) and [Card Style2](/app-editor/page-editor/built-in-elements/card-style3) elements into the Layout Column elements.

Example Card Group with Card Style1, Card Style2 and Card Style3 elements.

If you need more cards: * [Clone](/app-editor/page-editor/working-with-page-elements#clone-the-selected-element) one of the Layout Columns * Add the additional card into the cloned column You can customize the card group's layout by modifying the [Column Layout Format](/app-editor/page-editor/built-in-elements/layout-row#column-layout-format) setting for the layout row. # Card Style1

The **`Card Style1`** element provides a pre-designed [Card](/app-editor/page-editor/built-in-elements/card) element with: * A sample [Image](/app-editor/page-editor/built-in-elements/image) element that you can replace. * [Card Body](/app-editor/page-editor/built-in-elements/card#card-body) with sample heading and text that can be edited.

# Card Style2

The **`Card Style2`** element provides a pre-designed [Card](/app-editor/page-editor/built-in-elements/card) element that contains a [Card Body](/app-editor/page-editor/built-in-elements/card#card-body) with sample heading and text that can be edited.

# Card Style3

The **`Card Style3`** element provides a pre-designed [Card](/app-editor/page-editor/built-in-elements/card) element with: * [Card Header](/app-editor/page-editor/built-in-elements/card#card-header) containing sample text. * [Card Body](/app-editor/page-editor/built-in-elements/card#card-body) with sample heading and text. * [Card Footer](/app-editor/page-editor/built-in-elements/card#card-footer) with sample text.

# Alert

The **`Alert`** element as the name implies, provides a user-friendly way to provide feedback to the user or to grab the user's attention and display a message. It is closely related to the **`Alert Dismissible`** element that offers the ability to dismiss or remove the message. You can [edit the text](/app-editor/page-editor/editing-text) inside the Alert element just like other text editable elements and use the standard formatting tools in addition to created [Badged Text](/app-editor/page-editor/built-in-elements/badged-text). The Alert element inherits the font properties from the parent element chain or uses the Body font defined at the app level (in App Settings). You can customize this by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting or by using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). {% hint style="info" %} * You can use the Alert element inside a [Heading](/app-editor/page-editor/editing-text#heading) element and have it rendered in a heading style. * You can dynamically create an Alert element using the [Alert Text](/app-editor/page-flow/toolbox-blocks/alert-text) block in [Page Flow](/app-editor/page-flow). {% endhint %} *** ## Examples The following images show examples of Alert and Alert Dismissible elements.

Example of Alert element using the Yellow Alert Style

Example of Alert element using the Teal Alert Style

Example of Alert with formatted text and a Badged Text inside it.

Example of Alert inside a Heading element with Badged Text.

*** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Alert Style` Select from a pre-defined list of background and text colors. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Dismissible` Marks the element as dismissible. Used by the **`Alert Dismissible`** element. # Badged Text

The **`Badged Text`** element is typically used to display numerical counts, notifications, status labels, or any other short and important messages. The badged text element provides a quick way to customize the shape, the background and text colors (see below). You can further customize it by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting or by using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). You can add a badged text to your page in two ways: * Drag and drop the Badge Text element from the [Page Element Library](/app-editor/page-editor/page-editor-tour#page-element-library). * Convert any exiting text on the page to a Badged Text element using the ***Bdg*** button on the [Text Edit Toolbar](/app-editor/page-editor/editing-text). The badged text element inherits the font properties from the parent element chain or uses the Body font defined at the app level (in App Settings). You can customize this by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting or by using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab). {% hint style="info" %} * You can have the badged text element inside an [Alert](/app-editor/page-editor/built-in-elements/alert) element and inside [Heading](/app-editor/page-editor/editing-text#heading) elements. * You can dynamically create an Badged Text element using the [Badged Text](/app-editor/page-flow/toolbox-blocks/badged-text) block in [Page Flow](/app-editor/page-flow). {% endhint %} *** ## Examples The following images show examples of Badged Text elements.

Example of Badged Text inside a Link element with the Button look showing numerical counts as a way to indicate status.

Badged Text inside an Alert element which is inside a Heading.

{% hint style="success" %} You can have a badged text inside a button. Instead of a [Button](/app-editor/page-editor/built-in-elements/button) element, use a [Link](/app-editor/page-editor/built-in-elements/link) element with the [Type](/app-editor/page-editor/built-in-elements/link#type) setting set to *Button* and customize the [Button Look](/app-editor/page-editor/built-in-elements/link#button-look) and [Button Size](/app-editor/page-editor/built-in-elements/link#button-size) settings. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Badge Style` Select from a pre-defined list of background and text colors. For any other customizations see [here](/app-editor/page-editor/page-element-settings). ### `Badge Shape` Select between the Default (rectangular) and a Pill shape. # Collapsible Area

The **`Collapsible Area`** element allows you to hide and show content with a smooth transition. It is commonly used to create collapsible panels, accordions, or toggling content visibility on your app's pages. This element is particularly useful for crafting interactive user interfaces that optimize space usage by displaying or concealing content based on user interactions. You have multiple options to trigger the expansion or collapse of the element, as outlined below: * Using a [Link](/app-editor/page-editor/built-in-elements/link), [Button](/app-editor/page-editor/built-in-elements/button), [Menubar Item Link](/app-editor/page-editor/built-in-elements/menubar-item-link) or [Popup Menu Item](/app-editor/page-editor/built-in-elements/popup-menu-item) element: You need to set the [Link Action](/app-editor/page-editor/built-in-elements/link#link-action) or [Button Action](/app-editor/page-editor/built-in-elements/button#button-action) setting's value to ***`collapse`***, and specify the Element ID of the collapsible area element in the [Action Target](/app-editor/page-editor/built-in-elements/link#action-target) setting. Please note that the Element ID needs to be prefixed with a # character. * Using [Page Flow](/app-editor/page-flow) With Page Flow, you have complete flexibility to customize the behavior of the collapsible area. You are not limited to using specific elements as triggers for operating the collapsible area. By leveraging the **`Collapsible Area`** element, you can create dynamic and user-friendly interfaces that enhance content organization and improve user experience. Within the collapsible area element, you have the freedom to effortlessly drag and drop various elements such as [Image](/app-editor/page-editor/built-in-elements/image), [Alert](/app-editor/page-editor/built-in-elements/alert), [Badged Text](/app-editor/page-editor/built-in-elements/badged-text), [Link](/app-editor/page-editor/built-in-elements/link), [Text](/app-editor/page-editor/editing-text#text), [Heading](/app-editor/page-editor/editing-text#heading), [Flexible Area](/app-editor/page-editor/built-in-elements/flexible-area), [Button](/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage. *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Initial State` Specify whether the element is marked as Expanded or Collapsed when your page is loaded. ### # Data Table

{% hint style="info" %} The Data Table element requires at-least one [Database Table](/app-editor/data/database-tables) in your app's data. For more information please click [here](/app-editor/data). {% endhint %} Use the **`Data Table`** element to quickly show the data from one of your app's [database tables](/app-editor/data/database-tables). The Data Table is a widget element with the following characteristics: * It exhibits content dynamically upon page load. Within the page editor, it will showcase a placeholder that denotes the designated content area. To preview the element's appearance on your page, utilize the [Page Preview](/app-editor/page-editor/page-preview) feature. * It will span the entire width of its parent element horizontally. *** ## Example The image below shows a data table element placed inside in the right layout column. For demonstration the left layout column is styled with a green dashed border, and the right layout column is styled with a red dashed border. In the page editor, the data table element is rendered with a place holder as shown.

Example showing Data Table placeholder in the page editor.

When the page is previewed or loaded by the user, the data table element is rendered as shown below. The specific database table selected in the example had 5 fields. Each field is displayed in a column. Each entry in the database table is shown on a row. The data table element spans the width of the parent element horizontally as shown by the green and red dashed borders.

Example showing Data Table element when the page is loaded

{% hint style="info" %} By default all fields of the selected [Database Table](/app-editor/data/database-tables) are shown. Customization options are discussed below. {% endhint %} *** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Table` Select the desired [Database Table](/app-editor/data/database-tables) in your app. Without a valid database table selection, the data table element cannot work and will display a placeholder instead. ### `Select Columns to Display` If turned off, data table element will display all the fields in the selected database table. Each field will be displayed in its own column. If turned on, allows you customize the data table element in the following ways: * Select the specific fields you want to display in columns of the table. * Set the width used by each column. * Set the order of the columns. * Decide whether a column is displayed on a specific screen type. In the example below, the *First Name* field is chosen as Column 1, and is set to use 20% of the width. The *Notes* field is disabled for mobile phone screen sizes.

Customizing the Data Table by selecting columns

The Add Column button allows you to select [Database Table Fields](/app-editor/data/database-tables#table-fields) and choose the desired options as shown below:

Customizing the Data Table by adding columns

### `Custom Query` When this setting is OFF, the selected [Database Table](/app-editor/data/database-tables) will be read without any criteria and sorting rules. Turning this setting ON, allows you to use one of your defined queries and set the appropriate parameters via [Page Flow](/app-editor/page-flow). {% hint style="warning" %} NOTE: Ensure that the query you choose outputs the fields you want to display. {% endhint %} ### `Hide Column Headings` When turned ON, the names of the [Database Table](/app-editor/data/database-tables) fields will not be shown as the column header for the table. ### `Hide Toolbar` By default this setting is OFF. The data table element gets rendered with a toolbar at the top as highlighted in the image below:

The toolbar provides the following functionality: * Download the displayed information as a CSV file * Search the Database Table * Switch between pages of displayed information * The 'Add' button to trigger the data entry screen to add new entries to the database. If this setting is turned ON, this toolbar will not be displayed. *** ## Other ways to customize Using [Page Flow,](/app-editor/page-flow) you can further customize the data table in the following ways: * Use your own form instead of the default data entry screen for adding new entries and editing existing ones. * Add your own action options in the popup menu that is displayed when an entry row is clicked. * When the Custom Query option is turned ON, you can change the data display criteria and/or sorting order. # Stripe Payment

{% hint style="info" %} The Stripe Payment element requires at-least one connection to an active Stripe account. For more information please click [here](/app-editor/connections/services/stripe). {% endhint %} The **`Stripe Payment`** element provides a turn-key solution to accept payments inside your app. The Stripe Payment is a widget element with the following characteristics: * It exhibits content dynamically upon page load. Within the page editor, it will showcase a placeholder that denotes the designated content area. To preview the element's appearance on your page, utilize the [Page Preview](/app-editor/page-editor/page-preview) feature. * It will span the entire width of their parent element horizontally. The Stripe Payment element uses the [Test Mode keys](/app-editor/connections/services/stripe#test-mode-publishable-key) when you preview the page and uses the [Live Mode keys](/app-editor/connections/services/stripe#live-mode-publishable-key) when your page is normally loaded by your app's users. The information about successful payments are posted to the [Stripe service](/app-editor/connections/services/stripe) Connection Data. *** ## Example The image below shows a stripe payment element placed inside in the right layout column. For demonstration the left layout column is styled with a green dashed border, and the right layout column is styled with a red dashed border. In the page editor, the stripe payment element is rendered with a place holder as shown below.

Example showing Stripe Payment placeholder in the page editor.

When the page is previewed or loaded by the user, the stripe payment element is rendered as shown below.

Example showing Stripe Payment element when the page is loaded

*** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Stripe Connection` Select the Stripe service connection you want to use for the element. ### `Sendgrid Connection for Email` This is an optional setting. If you want the customer to receive a payment receipt email from your app, select the Sendgrid service connection here. ### `Require Shipping Address` Turn this ON if you want the stripe payment element to ask the user for their address.

### `Email Payment Receipt to Customer` Turn this ON if you want the customer to receive a payment receipt email from your app. This works in conjunction with the [Sendgrid Connection for Email](#sendgrid-connection-for-email) setting. ### `Email Notification` Turn this ON if you want a payment notification email to be sent to the address set in the [Notification Address](#notification-address) setting. ### `Notification Address` Specify the email address you want the payment notification to be sent to. ### `Amount` Provide the amount you want to charge using the payment element. If you need to calculate the amount dynamically when the user is using the app, enter 0 and use [Page Flow](/app-editor/page-flow) to set this value. # Form

{% hint style="info" %} To utilize the Form element, it is necessary to have an existing [form page](/app-editor/pages-and-forms/create-a-form) already created within your application. {% endhint %} Use the **`Form`** element to embed a form in your page. The Form is a widget element with the following characteristics: * It exhibits content dynamically upon page load. Within the page editor, it will showcase a placeholder that denotes the designated content area. To preview the element's appearance on your page, utilize the [Page Preview](/app-editor/page-editor/page-preview) feature. * It will span the entire width of their parent element horizontally. *** ## Example The image below shows a form element placed inside in the right layout column. For demonstration the left layout column is styled with a green dashed border, and the right layout column is styled with a red dashed border. In the page editor, the form element is rendered with a place holder as shown below.

Example showing Form element placeholder in the page editor.

When the page is previewed or loaded by the user, the form element is rendered with the specified form page.

Example showing Form element when the page is loaded

*** ## Options The [Options tab](/app-editor/page-editor/page-element-settings#options-tab) settings for this element are described below: ### `Form URL (AppDomain/forms/)` Specify the name of the form page or the [Publishing URL slug](/app-editor/page-settings#page-url) of the form page. ### `Allow Multiple Uses` When turned ON, the embedded form will reset back to its initial state after it has been successfully submitted. When turned OFF, the embedded form can only be used once per page load, and will display a status message after the form is submitted. # Menubar Login Info

{% hint style="info" %} The Menubar Login Info element can only be placed inside a [Menubar](/app-editor/page-editor/built-in-elements/menubar) element. {% endhint %} Use the **`Menubar Login Info`** element to show the current user's information and a way for the user to sign-off from your app.

Menubar Style1 with a Menubar Login Info (highlighted).

The Menubar Login Info is a widget element with the following characteristics: * It exhibits content dynamically upon page load. * It will show the current Zingy App Editor user within the page editor and in the the [Page Preview](/app-editor/page-editor/page-preview). # Data Design

The **`Data Design`** element is used to design a template with various elements and placeholders. This template can subsequently be populated with real data and dynamically incorporated into your page via [Page Flow](/app-editor/page-flow). The data design element can be positioned anywhere on the page, but it's important to note that as mere templates, they will not be rendered in the [Page Preview](/app-editor/page-editor/page-preview) or when accessed by users of your app. Each instance of the data design element on a page, will create one design template that can be dynamically shown on your page. Additionally, you have the flexibility to replicate the template multiple times, enabling the addition of rows to a table or any other desired repetition as needed. Within a Data Design, certain elements like [Image](/app-editor/page-editor/built-in-elements/image), [Link](/app-editor/page-editor/built-in-elements/link) and [Text](/app-editor/page-editor/editing-text), allow you to define placeholder fields, whose values can be set from real data. {% hint style="success" %} Look for the **`Dynamic Content`** toggle switch and the **`Field Name`** settings in these elements for defining the placeholder field names. {% endhint %} For example you can add a [Link](/app-editor/page-editor/built-in-elements/link) element and set its [URL dynamically](/app-editor/page-editor/built-in-elements/link#dynamic-content). Similarly a text element's content can also be set dynamically. To facilitate template design, certain element placement rules are relaxed. For instance, you can directly drag a [Layout Column](/app-editor/page-editor/built-in-elements/layout-column) into the data design element without the requirement of adding a [Layout Row](/app-editor/page-editor/built-in-elements/layout-row) element first. {% hint style="success" %} The usage of Data Design element is explained in more detail in [Dynamic Content](/app-editor/dynamic-content). {% endhint %} # Working with Forms Within Zingy, a form represents a unique type of page specifically designed to engage users in data input and facilitate the editing of existing data. Its primary objective is to establish a seamless interaction between the user and the application, enabling efficient data manipulation and updates. Normally a form is associated with a [Database Table](/app-editor/data/database-tables), but you can also create custom forms that are not attached to any specific database table. Examples for both of these cases is described below. *** ## Demonstration {% embed url="" %} Video: Demonstration of forms. {% endembed %} The video above demonstrates a database attached form and a custom form, which are explained in more detail below. *** ## Example Form with Database Table In this example, we will be creating a form page and associate it with a database table named **`Employees`**. This is done with the Table setting for the form by selecting the specific database table as shown below.

### Database table fields The image below shows the fields for the Employees database table. Please observe each field's type and sub-type.

### Automatic Data Field Input elements The page editor automatically creates data field input elements for all the fields in the associated database table. The following is a summary that outlines how the page editor employs the type and sub-type information of each field to determine the specific page element to be utilized for the data field input. | Field Type | Field Sub-Type | Element created | | ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Text | any | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Text*. | | Text | Multi-line | [Multi-line](/app-editor/page-editor/built-in-elements/multi-line) element | | Text | Multi-line HTML | [Multi-line](/app-editor/page-editor/built-in-elements/multi-line) element with [Rich Text](/app-editor/page-editor/built-in-elements/multi-line#rich-text) turned on. | | Text | Email | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Email*. | | Text | Phone | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Phone*. | | Text | Password | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Password*. | | Text | List of Values | [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) element with [options list](/app-editor/page-editor/built-in-elements/dropdown#dropdown-options) set to the field's values. | | Text | Files | Composite element that allows you to upload files. | | Numeric | - | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Number*. | | Numeric (decimals) | - | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Number*. | | Date/Time | - | Composite element that allows you to select date and time. | | Yes/No | - | [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) element | | Large Numeric | - | [Input](/app-editor/page-editor/built-in-elements/input) element with [Type](/app-editor/page-editor/built-in-elements/input#type) set to *Number*. | {% hint style="success" %} The page editor will create the data field input elements in two different styles: * Style1**:** where the field input elements are inside a [Input Group](/app-editor/page-editor/built-in-elements/input-group) * Style2**:** where they are directly utilized. Feel free to choose a style that gels with your app. The general functionality of the form is not affected by the style chosen. {% endhint %} For more information on database table fields, please see [Database Tables](/app-editor/data/database-tables). {% hint style="info" %} Based on the information about the type and sub-type of the fields you will observe the following in the [demonstration video](https://youtu.be/dmiyhGt75Oc): * The First Name, Last Name fields will use an input element with type set to Text. * The Notes field will use a multi-line element. * The Department field will use a dropdown element. {% endhint %} *** ## Example Form with Custom Data In this example, we will generate a custom form page that is not linked to any specific database table within your application. This is done with the Table setting for the form by selecting Custom (No Table) option as shown below.

### Custom fields The page editor is capable of automatically generating data field input elements, even when utilizing the Custom (No Table) option. For this you will be need to define fields based on your custom requirement. The definition of each field is similar to the database fields where a type and sub-type is set along with any other required attributes. Here we will use fields similar to the Employees database table used in the first example as shown below:

### Handling form submission {% hint style="info" %} Our discussion on [Page Flow](/app-editor/page-flow) blocks in this context is just a brief overview. For a more comprehensive understanding of Page Flow and its various blocks, we recommend referring to the dedicated [Page Flow section](/app-editor/page-flow), which delves into this topic and explores other blocks in greater detail. {% endhint %} When you have a form attached to a database table, the data submission is handled automatically. However, in the case of a custom form, you manage the submission manually through Page Flow. The [Form Events](/app-editor/page-flow/toolbox-blocks/form-events) block allows you to handle various stages of a user interacting with your form. The submission for custom forms is handled via the *Submit Tasks* [flow parameter](/app-editor/page-flow/block-anatomy#flow-parameters) where you can take some custom action with the data entered by the user and the mark whether the operation was successful or a failure via the [Set Form Event Status](/app-editor/page-flow/toolbox-blocks/set-form-event-status) block. You then signal that your custom processing is complete by using the [Form Submit Complete](/app-editor/page-flow/toolbox-blocks/form-submit-complete) block.

In the image above, the purple function block named ***`sendFormDataToMyCustomPlace`*** is an example placeholder function block used to indicate that you need do take some action on the data entered by the user. *** ## Adding Custom Logic to Forms [Page Flow](/app-editor/page-flow) allows you to add custom logic to forms (database-attached and custom forms). The following listing shows some important Page Flow blocks that are related to forms. For a complete listing of all Page Flow blocks, please see [Toolbox Blocks](/app-editor/page-flow/toolbox-blocks).


Form Events	Form Events
Form Data	Form Data
Set Form Event Status	Set Form Event Status
Set Form Event Status Message	Set Form Event Status Message
Form Submit Complete	Form Submit Complete
Lock/Unlock Form	Lock/Unlock Form
Reset Form	Reset Form
Save Form with Data	Save Form with Data
Set Field Input Value	Set Field Input Value
Get Field Input Value	Get Field Input Value

*** ## Using the Form Please refer to the section [Using Forms](/app-editor/page-editor/using-forms) for more information. # Using Forms The forms in your app can be presented to the user in the following ways: ## Page Flow Modal Popup The Page Flow [Show Popup Form](/app-editor/page-flow/toolbox-blocks/show-popup-form) block allows you to present the form dynamically on any page/form based on user-interaction e.g. a button-click. The result of the user's interaction with the form is provided back using the [Popup Form Data](/app-editor/page-flow/toolbox-blocks/popup-form-data) block for any further custom processing. ## Form Widget You can also embed a form on any page using the [Form](/app-editor/page-editor/built-in-elements/form) Widget. # Page Preview The page preview feature enables you to assess a functional version of your page while designing it. Accessible through the Preview button located in the [main toolbar of the page editor](/app-editor/page-editor/page-editor-tour#main-toolbar), this allows you to test and evaluate the appearance and functionality of your page in real-time. ### Responsive Design Page preview enables you to view your page across different screen sizes, including Desktop, Tablet, and Mobile. Located in the toolbar at the top, you can utilize the provided buttons to seamlessly switch between the various screen sizes.

Page Preview Toolbar with screen size buttons

### Features Using the page preview feature, you can test the following: * The functionality of various widgets such as [Data Table](/app-editor/page-editor/built-in-elements/data-table), [Stripe Payment](/app-editor/page-editor/built-in-elements/stripe-payment), [Form](/app-editor/page-editor/built-in-elements/form), etc. * Custom Javascript and CSS files * The effectiveness of your [Page Flow](/app-editor/page-flow) logic in guiding users through different interactions and processes. ### Limitations The following are some of the limitations in page preview when it comes to testing your page: * [Link](/app-editor/page-editor/built-in-elements/link) elements with their [URL](/app-editor/page-editor/built-in-elements/link#href) set to another page in your app will not work. * Custom JavaScript within your app that necessitates access to user peripherals such as the camera or microphone will not function. # Page Settings {% hint style="success" %} You can use the information in this section for both *Pages* and *Forms*. {% endhint %} The Page Settings screen allows configuring important settings related to a page or form in your Zingy app. You can access the page settings screen using the Settings button located in the [main toolbar of the page editor](/app-editor/page-editor/page-editor-tour#main-toolbar). {% hint style="warning" %} Please note that you need to [re-publish your app](/app-editor/publishing-your-app) for the settings to take effect. {% endhint %} The page settings are categorized into the following sections: ## Publishing ### `Active` The Active setting permits you to switch the publishing status of the page. When turned OFF, the page will be disabled and will not appear in the live version of your Zingy app. By default, this setting is set to ON. ### `Page URL` Use the Page URL setting to change the URL [slug](https://en.wikipedia.org/wiki/Clean_URL#Slug) of the page. e.g. if your Zingy app is using the URL **, the default URL of a page in your app will look like: ***<\>*** , where Page ID is the identifier you used when creating the page. {% hint style="success" %} NOTE: The default URL structure for a [form](/app-editor/pages-and-forms/create-a-form) within your app will follow this format: **<\>** , where Page ID is the identifier you used when creating the form. {% endhint %} You can change the default URL by providing your own slug in the Page URL setting. *** ## Access (Security) ### `Password Protected` The Password Protected toggle switch indicates whether your page is secure. If your page is publicly accessible, this setting will be OFF. If your page can only be accessed by a [successfully authenticated user](/app-editor/app-users) of your Zingy app, this setting will be ON. Please note that this setting is read-only and you need to use the Access Rules setting to modify your page's security setting. {% hint style="info" %} If an unauthenticated user attempts to access a page that is not publicly accessible, the app will automatically display a login screen. Upon successful authentication, the user will be redirected to the requested page. {% endhint %} ### `Access Rules` For a page, the Access Rules setting allows you to configure role based access. [User's](/app-editor/app-users) that are members of the Admin [group](/app-editor/app-user-groups) are always allowed to access any page in your Zingy app. To grant public access to a page, select "Public" from the Group dropdown menu and click the "Add" button. As a result, the Password Protected toggle switch will automatically be turned OFF, as depicted below:

Page Settings: Example of publicly accessible page.

To revoke public access for a page, simply click on the 'x' icon within the Public group. This action will trigger the automatic activation of the Password Protected toggle switch. The same methods as described above can be utilized to establish access rules for any group within your app. As described [here](/app-editor/app-user-groups#roles), when adding a group, the minimum role level also needs to be specified. Roles below the selected level will be disallowed when trying to access the page. *** ## Page Info/SEO ### `Title` The Title setting for a page specifies the label that is shown in a browser's title bar or a tab. When it comes to pages that are publicly accessible, the content within the page title plays a crucial role in search engine optimization. Optimal results are achieved with a descriptive title rather than a brief or generic one. Search engine algorithms utilize the title content as one of the factors to determine the ranking and order of pages in search results. Therefore, crafting a well-defined and informative page title can greatly impact search engine visibility and user engagement. ### `HTML Meta Desc` For publicly accessible pages, the HTML Meta Desc setting is used to provide a concise and accurate description of the content on a webpage. This description typically appears in search engine results pages (SERPs) as a snippet below the page title, giving users an idea of what the page is about. It is important to consider the following for this setting: * Be Concise: Keep the description brief, usually between 50 to 160 characters, as search engines may truncate longer descriptions. * Be Informative: Clearly summarize the main content or purpose of the webpage, providing an enticing preview to users. * Be Unique: Craft unique descriptions for each page on your website, avoiding duplicate or repetitive content. * Include Relevant Keywords: Incorporate relevant keywords or phrases that accurately reflect the content of the page. However, avoid keyword stuffing or excessive use of keywords, as search engines prioritize meaningful and natural language. *** ## Fonts {% hint style="success" %} NOTE: You can override the font of a specific element by: * Using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings#custom-css-classes) setting * Using the [Design Tab](/app-editor/page-editor/page-element-settings#design-tab) under the Font section. * Adding this font to the Font List in App Settings or at the page. If you want to use a font that is not supported, you can add the [font using CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts) {% endhint %} ### `Font List` Every page and form within your Zingy app will automatically adopt the defined fonts specified in your [app's settings](/app-editor/app-settings). To further customize the font selection, the Font List setting allows additional fonts to be utilized on the page. Furthermore, this setting allows for the removal of fonts that are no longer required. ### `Heading Font` Select the font to be used for displaying headings in your page using the Heading Font setting. By default the page will use the heading font selected in your [app's settings](/app-editor/app-settings). ### `Body Font` The Body Font setting allows you to select the font to be used in your page for all non-heading elements. By default the page will use the body font selected in your [app's settings](/app-editor/app-settings). *** ## Advanced ### `HTML Head Additions` The HTML Head Additions setting allows you to include custom Javascript (via script tag) and CSS files (via link tag). The contents of the HTML Head Additions setting, will be inserted into your page along with the [HTML Head Additions setting](/app-editor/app-settings#html-head-additions) defined in your [app's settings](/app-editor/app-settings). {% hint style="warning" %} It is recommended that you limit the contents if this setting to script, link or meta tags. {% endhint %} ### `Custom Style Definitions` The HTML Head Additions setting allows you to define your own CSS classes. The contents of the Custom Style Definitions setting will be inserted into your page along with the [Custom Style Definitions setting](/app-editor/app-settings#custom-style-definitions) defined in your [app's settings](/app-editor/app-settings). {% hint style="danger" %} Please define your CSS classes directly and do not include a style tag. The style tag is automatically generated. {% endhint %} ### `Footer Type` The Footer Type setting is applicable only to a [Structured Page](/app-editor/pages-and-forms/what-is-a-structured-page). The following are possible values for this setting: * Fixed The footer section will automatically be fixed to the bottom of your page. * Standard The footer section will be part of the normal flow of your page and will be placed where the body section ends. # Page Flow Page Flow in Zingy offers a user-friendly interface where you can design the flow of your app's pages and forms. It provides a collection of pre-designed blocks that can be easily arranged and connected through a drag-and-drop interface. Each block represents a specific programming concept or logic, allowing you to build sophisticated programs by stacking and nesting these blocks together. You can open the Page Flow editor by using the 'Page Flow' button on the [Page Editor's main toolbar](/app-editor/page-editor/page-editor-tour#main-toolbar). *** ## Page Flow Editor Tour The page flow editor consists of the main toolbar, the toolbox and the workspace sections and they are discussed below: ### Main Toolbar

The page flow editor's main toolbar sits near the top and provides the following buttons: * Save: Saves your work. * Close: Takes you back to the page editor. *** ### Toolbox

The page flow editor's toolbox serves as a palette or menu from which you can select blocks to build your page's flow. The toolbox appears as a vertical panel, providing a categorized collection of blocks that you can drag and drop onto the page flow editor's workspace. The blocks in the toolbox represent different programming concepts, commands, and functions that can be combined to create customized logic for your page. *** ### Workspace

The workspace is the main area where you build and arrange your flow using blocks. It appears as a grid-like interface where you can visually assemble the blocks to create the desired logic or sequence of instructions. To add a block to your program, you click and hold on the desired block in the toolbox, then drag it into the workspace. Once the block is in the workspace, you can release the mouse button to drop it into the desired position. The blocks can be connected together by attaching them to one another, forming a chain of blocks that represent the desired flow. The connection points on the blocks allow you to snap them together, creating a visual representation of the logical structure. By dragging blocks from the toolbox into the workspace and arranging them accordingly, you can construct the page's flow, define variables, implement conditional statements, perform calculations, and execute other programming tasks. *** ## See also


Understanding Page Flow blocks	Block Anatomy
Directory of all Page Flow blocks	Toolbox Blocks

# Block Anatomy {% hint style="success" %} NOTE: The information in this section applies to Page Flow and Cloud Flow blocks. {% endhint %} In this section, we will discuss various aspects of a Page Flow/Cloud Flow block including the types of blocks, configuration settings and block parameters. ## Types of Blocks In the Zingy Page Flow/Cloud Flow editors, you will encounter three distinct types of blocks. {% hint style="info" %} It's important to note that Zingy utilizes color-coded blocks based on their categories, and the example images below are provided solely to illustrate their shapes. {% endhint %} ### Regular Block Regular blocks feature notches at the top and bottom, allowing them to be stacked both above and below other regular blocks, as well as on top of terminal blocks. The image below provides an example of the shape of a regular block.

Regular Block shape with top and bottom notches

*** ### Terminal Block Terminal blocks have notches only at the top and can be stacked beneath regular blocks, but they do not support stacking below them. These blocks are commonly used to implement the concluding logic of a procedure or flow. The image below showcases an example of the shape of a terminal block.

Terminal block shape with only a top notch

*** ### Output Block Output blocks do not feature top and bottom notches, but they have a distinctive notch on the left side to indicate that they output or send out a value. These blocks are not designed to be stacked vertically. Instead, they connect to compatible [Value Parameters](#value-parameters) of other blocks. The image below depicts an example of the shape of an output block.

*** ## Configuration Settings The Page Flow/Cloud Flow blocks may have configuration settings allowing you to make a selection or type in directly on the block. Configuration settings within a block allow users to input specific data or make selections. They provide a way to customize the behavior of the block. Configuration settings can be of the following types: ### Input An Input configuration setting enables you to directly input text or numbers within the block, allowing you to specify the necessary information for its operation. The accompanying image showcases the [Set CSS](/app-editor/page-flow/toolbox-blocks/set-css) block, emphasizing two Input Configuration settings labeled *Add Classes* and *Remove Classes*. When utilizing this block, you would enter the CSS classes you wish to add or remove into their respective Input Configuration settings.

Page Flow Block highlighting Input Configuration Setting

*** ### Dropdown In Page Flow or Cloud Flow, the Dropdown configuration setting provides a selection of predefined options for customizing the behavior of a block. The image below highlights a dropdown configuration setting for the [Set Content (Mode 1)](/app-editor/page-flow/toolbox-blocks/set-content#mode-1) block where three options are shown: "Set Content of", "Append to" and "Prepend to". By choosing one of these options, you determine how the block will function on the page.

Page Flow Block highlighting Dropdown Configuration Setting

*** ### Selectable Input A selectable input configuration setting functions similarly to the input configuration setting mentioned earlier, but with an added

selection button. This

selection button allows you to choose a specific item or element related to the block, such as page elements, database tables, etc. Once the selection is made, the input field is automatically populated with information regarding the selected item. In the image below, a selectable input is highlighted, which triggers the selection of a page element. The associated input field in the block is automatically filled with the [Element ID](/app-editor/page-editor/page-element-settings#advanced-tab) of the chosen element. Selectable inputs are utilized in various Page Flow and Cloud Flow blocks.

Page Flow Block highlighting Selectable Input Configuration Setting

*** ## Block Parameters In addition to configuration settings, Zingy Page Flow and Cloud Flow blocks have parameters, which are categorized into the following types: ### Value Parameters Value Parameters are used to accept dynamic values and can be connected to other [Output Blocks](#output-block). It is indicated by a slot where values from other output blocks (with compatible output) can be plugged in. The image below shows examples of value parameters. The example on the left highlights the value parameter slot in the [Set Content (Mode 1)](/app-editor/page-flow/toolbox-blocks/set-content#mode-1) block. In the example on the right, the [Data Delete Record with ID](/app-editor/page-flow/toolbox-blocks/data-delete-record-with-id) block is shown with four value parameter slots labelled Table, Dataset Name, Dataset Refresh and Record ID. The value parameter slots can either be inside the block itself or on the edge of the block spanning multiple lines.

Example of Value Parameters in Zingy Page Flow and Cloud Flow blocks

The key difference between [Input Configuration Settings](#input) discussed above and Value Parameters are: * Their purpose and the type of data they handle: Input Configuration settings are used for capturing specific values directly within the block, while Value Parameters are used for accepting dynamic values or expressions from other blocks. * Input Configuration settings are generally used to configure the behavior a block, while Value Parameters enable data flow and connections between blocks. The image below shows an example of the [Set Content (Mode 1)](/app-editor/page-flow/toolbox-blocks/set-content#mode-1) block's value parameter connected to a Text block. The Text block itself has a [Input Configuration setting](#input) with the content set to "Hello World!" . When the page is loaded or previewed this would set the content of the selected element to the text "Hello World!"

Example showing Content block's Value Parameter connected to a Text block.

Another example using the same [Set Content (Mode 1)](/app-editor/page-flow/toolbox-blocks/set-content#mode-1) block as above is shown below. This time the Set Content block is connected to the Variable Value block which has a [Dropdown configuration setting](#dropdown) and has the variable named mycontent selected.

Example showing Content block's Value Parameter connected to a Variable block.

As a final example the [Data Delete Record with ID](/app-editor/page-flow/toolbox-blocks/data-delete-record-with-id) block is shown below with its Table, Dataset Name, Dataset Refresh and Record ID value parameters all connected to other blocks.

Example showing the DELETE Record block's Value Parameters connected to other blocks.

In summary, Value Parameters allow for the flow of dynamic data between blocks. They can be attached to compatible output blocks including compatible Variable Value blocks. *** ### Value Parameter Set Certain blocks accept a set of Value Parameters. The parameters in the set can optionally have configurable names. The image below shows two blocks that accept a Value Parameter Set. In this case the value parameters do not have names.

Example of blocks with Value Parameter Set without names

The image below shows two blocks that accept Value Parameter Sets with configurable names.

Examples of Blocks with configured Value Parameter Set

The number of such parameters in the set varies based on the block's configuration settings. The image above shows the [Content from Data Design](/app-editor/page-flow/toolbox-blocks/content-from-data-design) block with it's Value Parameter Set showing three parameters, based on the selected [Data Design](/app-editor/page-editor/built-in-elements/data-design) element. You have the option to include or exclude parameters from this set by clicking on the "gear" icon located at the top left corner of the block. An example of this functionality is demonstrated in the image below.

Add/Removing parameters from the Value Parameter Set

*** ### Flow Parameters Flow Parameters are used to connect regular and/or terminal blocks. It is represented by a notch or opening in a block where other blocks can be attached. The image below shows three examples of blocks that have Flow Parameters. From left to right, the Repeat Loop block includes a flow parameter labeled "do". The If Condition block also features a flow parameter named "do". Lastly, the [Data Lookup with ID](/app-editor/page-flow/toolbox-blocks/data-lookup-with-id) block incorporates two flow parameters: "on Success do" and "on Error do".

Flow Parameters allow for the sequencing and nesting of blocks to create logical flows and control structures. The image below shows the If Condition block with two flow parameters. The blocks connected to the "do" flow parameter will get executed if the condition (amount is greater than 100) is true. The blocks connected to the "else" flow parameter will get executed if the condition is false i.e. amount is less than or equal to 100.

Example of flow parameter with attached blocks.

*** ## Block Operations Right-clicking on a block will bring up a popup menu with options as shown in the image below:

Each of the options in the block's popup-menu is described below: * Duplicate: Makes a copy of the block and adds it to the Page Flow/Cloud Flow workspace. * Add Comment: Allows you to document what you are doing with the block. * Collapse Block/Expand Block: Allows you to collapse a block to use less space in the workspace or expand a collapsed block back to its original form. * Disable Block/Enable Block: You can disable a block, but keep it in the workspace. Once disabled this option will allow you to re-enable the block. * Delete: Delete's the block and all attached blocks. * Help: Takes you to the Zingy documentation for the block. # Toolbox Blocks # Set Content {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Page Content Block Type: [Regular](/app-editor/page-flow/block-anatomy#regular-block) {% endhint %} **`Set Content`** is a [regular block](/app-editor/page-flow/block-anatomy#regular-block) that allows you to set the content of any element on the page or form. {% hint style="success" %} Refer to the [Set Content in Data Design](/app-editor/page-flow/toolbox-blocks/set-content-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Set Content block consists of (from left to right): * *Behavior*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) that allows you to choose from three options: 1. Set Content of: Overwrite the contents of the chosen *Element* with *Content* provided. 2. Append to: Add the *Content* provided to the existing content of the chosen *Element*. 3. Prepend to: Add the *Content* provided before any existing content of the chosen *Element*. * *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to change the content of. * *Content*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the content you want to set. ## Mode 2

The Mode 2 version of the Set Content block consists of (from left to right): * *Behavior*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) that allows you to choose from three options: 1. Set Content of: Overwrite the contents of the chosen *Element* with *Content* provided. 2. Append to: Add the *Content* provided to the existing content of the chosen *Element*. 3. Prepend to: Add the *Content* provided before any existing content of the chosen *Element*. * *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value. The Element block comes pre-attached for your convenience but can be removed and customized. * *Content*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the content you want to set. *** ## Usage Examples The image below shows an example of the Mode 1 version where the *Content* value parameter attached to a Text block containing "Hello World!".

In the next example we see a Mode 2 version where the *Element* value parameter is attached to an Element block.

The next example also shows a Mode 2 version but this time the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element.

Example of Set Content using a Variable Value block

# Get Content {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Page Content Block Type: [Output](/app-editor/page-flow/block-anatomy#output-block) Output Type: [*text*](/app-editor/page-flow/references/value-types) {% endhint %} **`Get Content`** is an [output block](/app-editor/page-flow/block-anatomy#output-block) that retrieves and outputs the content of any element on the page or form. The output is of type [*text*](/app-editor/page-flow/references/value-types) and is compatible with [Value Parameters](/app-editor/page-flow/block-anatomy#value-parameters) of type [*text*](/app-editor/page-flow/references/value-types) or of type [*any*](/app-editor/page-flow/references/value-types). {% hint style="success" %} Refer to the [Get Content in Data Design](/app-editor/page-flow/toolbox-blocks/get-content-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below: ## Mode 1

The Mode 1 version of the Get Content block consists of the *Element* [selectable input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to get the content of. ## Mode 2

The Mode 2 version of the Get Content block consists of the *Element* [value parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. # Badged Text {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Page Content Block Type: [Output](/app-editor/page-flow/block-anatomy#output-block) Output Type: [*text*](/app-editor/page-flow/references/value-types) {% endhint %} The **`Badged Text`** block is an [output block](/app-editor/page-flow/block-anatomy#output-block) that dynamically creates a [Badged Text element](/app-editor/page-editor/built-in-elements/badged-text) and outputs its content (of type [*text*](/app-editor/page-flow/references/value-types)) .

It consists of the following (from left to right): * *Badge Shape*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with options for [Normal or a Pill shape](/app-editor/page-editor/built-in-elements/badged-text#badge-shape) * *Badge Style*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with pre-defined options of [background and text colors](/app-editor/page-editor/built-in-elements/badged-text#badge-style). * *Text*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the content inside the badge. {% hint style="success" %} You can attach the block to [Set Content](/app-editor/page-flow/toolbox-blocks/set-content) or [Set Content in Data Design](/app-editor/page-flow/toolbox-blocks/set-content-in-data-design) blocks to display the content on the page or form. {% endhint %} *** ## Usage Example An example of the usage for the Badged Text block is shown below:

*** ## See also [Badged Text Element](/app-editor/page-editor/built-in-elements/badged-text) [Page Flow Set Content block](/app-editor/page-flow/toolbox-blocks/set-content) # Alert Text {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Page Content Block Type: [Output](/app-editor/page-flow/block-anatomy#output-block) Output Type: [*text*](/app-editor/page-flow/references/value-types) {% endhint %} The **`Alert Text`** block is an [output block](/app-editor/page-flow/block-anatomy#output-block) that dynamically creates a [Alert element](/app-editor/page-editor/built-in-elements/alert) and outputs its content (of type [*text*](/app-editor/page-flow/references/value-types)) .

It consists of the following (from left to right): * *Alert Type*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with options for [Normal or a Dismissible alert](/app-editor/page-editor/built-in-elements/alert#dismissible). * *Alert Style*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with pre-defined options of [background and text colors](/app-editor/page-editor/built-in-elements/alert#alert-style). * *Text*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the content inside the alert. {% hint style="success" %} You can attach the block to [Set Content](/app-editor/page-flow/toolbox-blocks/set-content) or [Set Content in Data Design](/app-editor/page-flow/toolbox-blocks/set-content-in-data-design) blocks to display the content on the page or form. {% endhint %} *** ## Usage Example An example of the usage for the Alert Text block is shown below:

*** ## See also [Alert Element](/app-editor/page-editor/built-in-elements/alert) [Page Flow Set Content block](/app-editor/page-flow/toolbox-blocks/set-content) # Status Animation {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Page Content Block Type: [Output](/app-editor/page-flow/block-anatomy#output-block) Output Type: [*text*](/app-editor/page-flow/references/value-types) {% endhint %} The **`Status Animation`** block is an [output block](/app-editor/page-flow/block-anatomy#output-block) that dynamically creates a visual indicator used for providing feedback during actions that may take some time to complete, such as data loading, form submission, or application processing.

It consists of the following (from left to right): * *Type*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with options for Spinning or Pulsing. * *Style*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with pre-defined color options. * *Size*: [Dropdown configuration setting](/app-editor/page-flow/block-anatomy#dropdown) with pre-defined size options of Normal and Small . {% hint style="success" %} You can attach the block to [Set Content](/app-editor/page-flow/toolbox-blocks/set-content) or [Set Content in Data Design](/app-editor/page-flow/toolbox-blocks/set-content-in-data-design) blocks to display the content on the page or form. {% endhint %} *** ## Usage Example An example of the usage for the Status Animation block is shown below: The example displays a spinning status animation using the [Set Content block](/app-editor/page-flow/toolbox-blocks/set-content) and then proceeds to conduct a task (in this case a database table lookup operation). When the task completes, the spinning status animation is replaced by an [Alert](/app-editor/page-editor/built-in-elements/alert) using the [Alert Text block](/app-editor/page-flow/toolbox-blocks/alert-text).

*** ## See also [Page Flow Set Content block](/app-editor/page-flow/toolbox-blocks/set-content) [Alert Text block](/app-editor/page-flow/toolbox-blocks/alert-text) # Set Style {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Style/CSS Block Type: [Regular](/app-editor/page-flow/block-anatomy#regular-block) {% endhint %} **`Set Style`** is a [regular block](/app-editor/page-flow/block-anatomy#regular-block) that allows you to set a [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) on any element on the page or form. {% hint style="success" %} Refer to the [Set Style in Data Design](/app-editor/page-flow/toolbox-blocks/set-style-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Set Style block consists of (from left to right): * *Property*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set. * *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to set the style of. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the value of the property you are setting. ## Mode 2

The Mode 2 version of the Set Style block consists of (from left to right): * *Property*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the [CSS Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index) you want to set. * *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the value of the property you are setting. *** ## Usage Examples The image below shows an example of the Mode 1 version where the [**`background-color`** CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) of a selected element is set using the Color Selection block attached to the *Data* value parameter.

In the next example we see a Mode 1 version where the *Data* value parameter is attached to an Text block specifying the color in [hex triplet format](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet).

Example of Set Style using a Variable Value block

# Set CSS {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Style/CSS Block Type: [Regular](/app-editor/page-flow/block-anatomy#regular-block) {% endhint %} **`Set CSS`** is a [regular block](/app-editor/page-flow/block-anatomy#regular-block) that allows you to add and/or remove [CSS classes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) from any element on the page or form. {% hint style="success" %} Refer to the [Set CSS in Data Design](/app-editor/page-flow/toolbox-blocks/set-css-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Set CSS block consists of (from top to bottom): * *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to add/remove the CSS classes for. * *Add Classes:* [Input](/app-editor/page-flow/block-anatomy#input) configuration setting to specify classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes. * *Remove Classes:* [Input](/app-editor/page-flow/block-anatomy#input) configuration setting to specify classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes. ## Mode 2

The Mode 2 version of the Set CSS block consists of (from top to bottom): * *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. * *Add Classes*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes. * *Remove Classes*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*text*](/app-editor/page-flow/references/value-types) value containing the classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes. *** ## Usage Examples The image below shows an example of the Mode 1 version where the CSS class `bg-info` is being added and the class `bg-dark` is being removed.

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element. The *Add Classes* and Remove Classes value parameters are attached to Variable Value blocks.

{% hint style="success" %} NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information: * [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector) * [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) {% endhint %} # Set Input Value {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Input Block Type: [Regular](/app-editor/page-flow/block-anatomy#regular-block) {% endhint %} **`Set Input Value`** is a [regular block](/app-editor/page-flow/block-anatomy#regular-block) that allows you to set the value of [Input](/app-editor/page-editor/built-in-elements/input), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) and [Multi-line](/app-editor/page-editor/built-in-elements/multi-line) elements on a page or form. {% hint style="success" %} Refer to the [Set Input Value in Data Design](/app-editor/page-flow/toolbox-blocks/set-input-value-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Set Input Value block consists of (from left to right): * *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to set the value of. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts the value to set (of type [*text*](/app-editor/page-flow/references/value-types)*)* ## Mode 2

The Mode 2 version of the Set Input Value block consists of (from left to right): * *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts the value to set (of type [*text*](/app-editor/page-flow/references/value-types)*)* *** ## Usage Examples The image below shows an example of the Mode 1 version where the *Data* value parameter is attached to a Variable Value block configured to use the variable *b* which has been set to "John".

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element. This time the *Data* value parameter is attached to the Text block containing the text "Jane".

{% hint style="success" %} NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information: * [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector) * [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) {% endhint %} # Get Input Value {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Input Block Type: [Output](/app-editor/page-flow/block-anatomy#output-block) Output Type: [*text*](/app-editor/page-flow/references/value-types) {% endhint %} **`Get Input Value`** is an [output block](/app-editor/page-flow/block-anatomy#output-block) that allows you to retrieve the value of [Input](/app-editor/page-editor/built-in-elements/input), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown) and [Multi-line](/app-editor/page-editor/built-in-elements/multi-line) elements on a page or form. The output is of type [*text*](/app-editor/page-flow/references/value-types) and is compatible with [Value Parameters](/app-editor/page-flow/block-anatomy#value-parameters) of type [*text*](/app-editor/page-flow/references/value-types) or of type [*any*](/app-editor/page-flow/references/value-types). {% hint style="success" %} Refer to the [Get Input Value in Data Design](/app-editor/page-flow/toolbox-blocks/get-input-value-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Get Input Value block consists of a [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to get the value of. ## Mode 2

The Mode 2 version of the Get Input Value block consists of a [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. *** ## Usage Examples The image below shows an example of the Mode 1 version where the variable *b* is set to the text entered in the selected input element.

In the next example we see a Mode 2 version where the variable *b* is set to the text entered in the selected input element. This time the element is selected using a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors).

Lastly we have another example with a Mode 2 version. This time the [Show Information Popup](/app-editor/page-flow/toolbox-blocks/show-information-popup) block is used to show a message that contains the text entered in the selected element.

# Set Toggle Switch State {% hint style="info" %} **Block Information** Available in: Page Flow Toolbox Category: Input Block Type: [Regular](/app-editor/page-flow/block-anatomy#regular-block) {% endhint %} **`Set Toggle Switch State`** is a [regular block](/app-editor/page-flow/block-anatomy#regular-block) that allows you to set the state of [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch) elements on a page or form. {% hint style="success" %} Refer to the [Set Toggle Switch State in Data Design](/app-editor/page-flow/toolbox-blocks/set-toggle-switch-state-in-data-design) block for dynamically generated content. {% endhint %} The block comes in two modes which are discussed below. ## Mode 1

The Mode 1 version of the Set Toggle Switch State block consists of (from left to right): * *Element*: [Selectable Input](/app-editor/page-flow/block-anatomy#selectable-input) to choose the element you want to set the state of. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*boolean*](/app-editor/page-flow/references/value-types) *(true/false)* type value to set. ## Mode 2

The Mode 2 version of the Set Toggle Switch State block consists of (from left to right): * *Element*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts either a [*text*](/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized. * *Data*: [Value Parameter](/app-editor/page-flow/block-anatomy#value-parameters) that accepts a [*boolean*](/app-editor/page-flow/references/value-types) *(true/false)* type value to set. *** ## Usage Examples {% hint style="success" %} NOTE: The same examples also apply for a [Checkbox](/app-editor/page-editor/built-in-elements/checkbox) element. {% endhint %} The image below shows an example of the Mode 1 version where the *Data* value parameter is attached to a Variable Value block configured to use the variable *b* which has been set to "true". This would toggle the switch to the "ON" position.

Example of Set Toggle Switch State Mode 1

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element. This time the *Data* value parameter is attached to the True/False block containing the value "false". This would toggle the switch to the "OFF" position.