SnapApp by BlueVector AI

Sections

How to create a Page?

Navigate to Settings from the User menu of the top bar.
Tap on Pages from the UX menu of the left navigation bar.
Tap on + Add New in the top header of the Pages list view.
Enter a name for your page in the name field that will be visible in the Page Builder by default.
Update the Slug name in the Slug field.
Tick the checkbox for Active and tap on Save.
Once you click Save, you will be taken to the Page Builder where you can build and edit your page.

save-page

Import Custom HTML and CSS

From the Page Builder, tap on the Import icon in the top right header of the Page.
Enter your existing HTML and CSS into the Import Template
Tap on Import at the bottom of the Page.

import-HTML

Attach Custom Javascript and CSS

Click on the paper clip icon 📎 on the top right header in the Page Builder or navigate to the ‘List View’ of pages and click on the “Pencil Icon” button to open the update page form.
In the update page form, scroll down to find “Attachments” section and tap on + Add New in the top header of the Attachments list view.
Switch the Type to File and upload your customized CSS file into File or customized JavaScript file into File. Enable the active button and tap on Save.
You have the ability to upload multiple Javascript and CSS files.
Switch back to the Page Builder to verify if the customized page is being displayed as expected. Ensure that all imported styles and scripts are functioning correctly.

paperclipJS attachment

How to edit Page properties?

From the Page Builder, tap on the Edit Properties icon in the top left header of the Page.
You can update name, slug, application ID, object and visibility → Update
You can also revert back to previous page versions from here .

edit-page-properties

Properties	Details
Name	Name of the page that will display in Page Builder as text. It can be removed from the Page Builder.
Page Object	The particular object for which you want to build the Page. By default, without defining the object, the Page will be visible as the Main page.
Slug	Slug is the name referenced in the address bar.
Page Version	Allows you to revert to an older version of the Page Builder for this particular page. This feature helps in rolling back changes made to the page when required.
Application ID	The application for which you want to build the Page.
Hide Sidebar	Clicking this checkbox will hide the left navigation bar.
Visibility	Configuring the visibility as Private requires logging into SnapApp and possessing the appropriate permissions to access the Page. Setting the visibility as Public allows anyone to have access to see the Page, regardless of whether they have logged in.

page-properties

Page Clone

From the Page Builder, tap on the icon in the top left header of the Page.

This will redirect you to the Page Builder of the cloned page.

page-clone

cloned-page-builder

Detail view of the Page?

From the Page Builder, tap on the Pin icon in the top left header of the Page.

This will redirect you to the detail view of the Page.

page-edit

detail-view

How to delete a Page?

Tap on the icon in the list view of the Page.

delete-page

Display Mode

There are 3 different types of display mode available:

Desktop mode (default mode)
Tab mode
Mobile mode

display-mode

How to publish a page?

From the Page Builder, tap on the Publish in the top middle header of the Page.

page-publish

View Components

From the Page Builder, tap on the View Components icon in the top right header of the Page.

This will select all the components of the Page.

view-components

How to preview a Page?

From the Page Builder, tap on the Preview icon in the top right header of the Page.

page-preview

View Code

From the Page Builder, tap on the View Code icon in the top right header of the Page.

This will open the HTML and CSS code for the Page, and this is uneditable.

view-code

Delete Page Components

From the Page Builder, tap on the Delete Canvas icon in the top right header of the Page.

This will delete the components of the canvas all at once.

delete-canvas

How to add components in a Page?

From the Page Builder, tap on the + icon in the top right corner header of the Page.

Components	Details
1 Column	A single cell within a row.
2 Columns	Two cells of equal size within a row.
3 Columns	Three cells of equal size within a row.
2 Columns 3/7	Two cells of unequal size(3/7)(4/7) in a row.
Text	A text box will be added to the canvas. You can edit your text there.
Link	A link text will be added to the canvas. URL can be configured from settings.
Image	To add image in the Page, this can be used. You have to upload the image or you can add an image path and tap on Add Image.
Video	To add video in the Page. You can select Source, Provider, Poster and some other features from Settings.
Map	To add a map in the Page. You can also configure the Map type and address.
Link Block	A link block will be added to the canvas. URL can be configured from settings.
Quote	To add quotation in the Page.
Text Section	To add a section for Text with two different textbox.
Custom Code	This will add custom code for other components you want to add in Page but not available in the Components list.
Grid	To add grid in the Page i.e. two parallel columns in a row of a container.
Col	This will add column in the Page. By default this is set to 12.You can change the column number and breakpoint from the Settings.
Row	This will add a row in the Page.
Button	To add a button in the Page. You can set theme, size, target and link from the Settings.
Card	This will add a card i.e. 3 text box for header, footer and description and an image.
Alert	To add any alert type text in the Page.
List	This will add a list of 5 list-items by default. You can change theme, link, target and some other features for individual list-item from the Settings.
List Item	To add more list-item to a list. You can change theme, link, target and some other features from the Settings.
Table	This will add a table with 3 rows by default.
Typography	A special type of text box with the option for customizing the theme, heading and display.
Badge	An UI element used to highlight some text. This is used for showing tags.
Dynamic View	To add an object which does not have a custom view. You can configure view type from the Settings.
Custom View	To add a custom view to the Page i.e. a view that you have created. You have to select the view name and the view type from the Settings.
SQL List Repeater	To show particular record/s from an object in a list format.
SQL Grid Repeater	To show particular record/s from an object in a grid format.
Field	To add a particular field of an object.To view any record of that field in the Page, you have to configure the URL with the ID of the record. Pass the name of the field within `[[]]` . When any dynamic field is passed like `id`, it should be passed within `'[[]]'`
Dashboard	This will add dashboard to the Page. You have to create a dashboard and select it from the Settings.
Workflow Action Button	A button to trigger the workflow. You can choose the workflow, target from Settings or redirect to the URL of the workflow.
Controller View	This will add a view which acts as a master view. On referencing this to the controlled view/s , you can control them like searching, filtering, etc. There can be multiple controlled views under one controller view.
Controlled View	This will add a view which acts as a child view. You can refer it from a controller view. There can be multiple controlled views under one controller view.

How to customize each component of the Page?

From the Page Builder, tap on the Open Style Manager icon in the top right header of the Page.
Tap on the component you want to style.

There are different styling categories available: - General - Dimensions - Typography - Decorations - Extra

For example, Changing the dimensions or font style or background color

style-manager

How to set conditions for a component?

From the Page Builder, tap on the Settings icon in the top right header of the Page.
Tap on the component you want to style.

For example, Show If condition for the component

set-conditions

How to layer different components of a Page?

From the Page Builder, tap on the Open Layer Manager icon in the top right header of the Page.

You can select and layer among different components and even within the same component. For example, layering the different parts of a Card component.

layer-components

Example of Using Dynamic Values

Dynamic values enable you to fetch and display information dynamically by referencing field names within double brackets [[field_name]]. This feature is particularly useful for creating dynamic forms, templates, or content pages that rely on object data.

Example:

To display the registration number dynamically:

<div class="field-box">[[registration_number]]</div>

Dynamic Values Example

Example of Expressions and Formulas

The Page Builder supports expressions and formulas for enhanced customization, enabling dynamic content rendering and conditional logic. These use triple brackets [[[...]]] for evaluation, making it easy to calculate values, fetch data, or control the visibility of elements.

1. Using Lookup in Dynamic Content

Fetch a contact’s email using their contact_id:

=[[[LOOKUP('[[contact_id]]', 'contacts', 'id', 'email')]]]

2. Conditional Visibility

Hide a section when the [[field_name]] value is not 1:

showif="=IF([[field_name]] == 1)"

3. User-based Condition

Display a message to all users except those in a specific list:

showif="=NOT(IN(USERID(), SELECT('tokens', 'user_id', None, None, True)))"

Example of SQL List component configuration

SQL-List

Example of SQL Grid component configuration

SQL-Grid

The above example will show the records for ID and Created_by fields of the Attachments object. Once the Page is published, you can add the ID of the record in the Page URL.

Example of Controller View component configuration

The Controller (Master) View defines the parent view that controls one or more child views. In the example below, the Producer View is configured as the Controller with the following settings: - View Type: List - Name: pro-list

controller-view

Example of Controlled View component configuration

The Controlled (Child) View is linked to a Controller View and displays data related to it. In the example below, the Anime view is configured as the Controlled View with the following settings: - View Type: List - Master View Name: pro-list (name of the Controller View) - Ref Field: A shared field between the Controller and Controlled Views that serves as the Foreign Key.

controlled-view

Key Notes for Configuration

Master View Name: Set the name of the Controller (e.g., pro-list) in the configuration for the Controlled View.
Ref Field: The Ref Field must be common to both views and act as a Foreign Key, ensuring the relationship between the data.

Thank you for following these steps to configure your SnapApp components effectively If you have any questions or need further assistance, please don’t hesitate to reach out to our support team. We’re here to help you make the most out of your SnapApp experience.

For support, email us at snapapp@bluevector.ai

Generate Text