Administration

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

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

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.
Slug	Slug is will be the name referenced in the address bar.
Application ID	The application for which you want to build the 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.
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.
Hide Sidebar	Clicking this checkbox will hide the left navigation bar.

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.
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 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

controller-view

Example of Controlled View component configuration

controlled-view

In the above example, Producer View is taken as the controller(master) view with the view type as a list and the name as pro-list. Anime is taken as controlled(child) view with the view type as list. You have to set the name of master view (here, pro-list) and configure the Ref Field which must be common for both the fields and can act as a Foreign Key.

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