- You can insert style elements like image, back ground color and more. (Read more about styles).
- Table:
Table can be used to display the records in a tabular format. For
example, in the image below the product name, description, main storage
are the fields present in the layout that are displayed as rows and
columns. Tabular format lets you save space in the detail page.
- Hover on rows and columns and click + or - icons to add or delete a row or column.
- Right click on a row to change fields, fix or fluid component, copy or paste style or delete the field.
- Drag the borders to resize the table.
- Text:
Add a text box to enter content within the detail page, for example use
it as a heading before starting a section or to add a note, disclaimer
etc.
- Drag the borders to resize the text box.
- Right click to clone, fix or fluid component or delete the text box.
- Images: The
Image element can be used to add image component in detail page. For
example, you can add an image component and set it as a profile picture
for the particular record.
- You can select and drag the image element into the canvas and align it with the existing elements.
Click on the image element and you will the option to upload image.
You can browse and upload images from your device or choose from the
previously uploaded images saved in My Images tab, or add image from
URL. After adding the image, you can resize it, adjust other styles like border, shadow, radius, padding, etc.
- Icons:
Use an icon to represent a field instead of conventional text label.
For example in the image below the product name and price are displayed
using icons instead of text.
- Scroll on the icon bar to move up and down and choose from the wide range of icons.
- Click on the icon to clone, delete or change.
- Drag the borders to increase or decrease the size.
Fixed and Fluid Component
Every
element (section, tab, text, table) has an option to set it either as a
fixed or a fluid component. By selecting fixed component you can
restrict the size of an element from changing according to a user's
screen. On the other hand, selecting fluid component will allow the
element to resize itself according to users' screen size.
For
example, if you think the background image inserted for a section may
spill outside a certain screen size then it is best to set it as a fluid
component so that it adjusts the size depending on users screen.
Applying Style to the Elements
Style
such as background color, padding, field label alignment, border,
margin, etc. can be applied to all the elements. You can also customize
the page background by using the style options. Some options are
specific to an element. These style options can be added to the presets
and reapplied to new elements in the future.
Watch the videos in the playlist below to quickly learn how to apply styles.
Style options for a page
The page customization comprises of:
- Background
- Padding
- Height
- Width
- Fit to screen
Background
- Select a background color from the palette or color picker. You can also mention the HEX code of the color.
- Select
the Image checkbox and click Upload Image. In the pop-up you can either
upload image from the device, choose from previously uploaded images,
or use URL to add image.
- Image Size - The size can be defined using three options.
- Contain - This option will adjust the size of an image to fit into a page, while keeping the aspect-ratio intact.
- Original - This image will be retained in its original size.
- Cover - This option will stretch the image to fill the length and width of the page regardless of the aspect-ratio.
- Image Repeat -
If the size of the background image is small such that it doesn't cover
the entire page, you can use the image repeat option. This will let you
repeat the image multiple times and fill the background completely.
Following repeat types can be selected:
- X - The image will repeat along the X axis.
- Y - The image will repeat along the Y axis.
- Both - The image will repeat along both the X and Y axis of the page.
- No Repeat - This prevents the image from being repeated.
- Select the Gradient
checkbox to create a smooth transition between multiple colors in the
background. If you choose multiple colors in a straight line, then the
position can be adjusted to offer a perfect blend of all the colors.
Padding
Padding
determines the space around the content inside a margin/border. To
modify padding, select the element and click the Padding checkbox.
- Increase Padding: The padding can be increased by dragging the slider to the right. You can also specify the padding in Pixels.
- Same padding for all sides:
The Padding same for all sides checkbox applies the padding that you
have configured on all four sides of the element. You can unselect tis
checkbox and define different padding for all four sides of the element.
Height and Width
Adjust
the height and width of the page by entering the values in pixels or
you can check the automatic option so that the screen adjusts
accordingly.
Fit to Screen
The page will expand and adjust itself according to the length and width of the users screen.
Style options for the sections
The section can be customized using:
- Background - The options are same as that available for the page.
- Border
- Shadow
- Radius
- Padding - The options are same as that available for the page.
- Height and width - The options are same as that available for the page.
- Depth
Border
Click the border checkbox and do the following:
- Adjust thickness: Drag the slider to increase the size of the border. You can also enter the border value in pixels.
- Style: Select a border style from the drop-down list.
- Color: Choose a color for the border from the color palette or enter HEX code for a color.
- Same border for all sides:
Check this option to apply the border settings to all the four sides of
the section. You can clear this checkbox and define different width,
style, and color for each side.
Shadow
Click the shadow checkbox and do the following:
- X -
Based on the value, the shadow will move horizontally (left or right). A
positive 'X' value will place the shadow on the right side of the
element. A negative value will push the shadow to the left.
- Y -
Based on the value, the shadow will move vertically (top or bottom). A
positive 'Y' value will place the shadow at the top and a negative 'Y'
value will push it to the bottom.
- Blur -
Defines the sharpness of the shadow. If the blur is 0, the shadow will
be sharp. Higher the value lesser will be the sharpness.
- Spread - Adjust the size of the shadow, positive spread value will increase the shadow and negative spread value will decrease it.
- Color - The border color can be chosen from the color picker.
Radius
Give rounded corners by defining the radius. Click the Radius checkbox and do the following:
- Increase radius: Drag the slider to increase the radius or enter a value in the box.
- Same radius for all sides:
Check the option to keep the radius size same for all four sides. You
can uncheck the option and define different radius sizes for each side.
Margin
Define
the position of the element in the details page. To add a margin
padding, select the element and click the Padding checkbox.
- Increase Margin: The margin can be increased by dragging the slider to the right. You can also specify the margin in Pixels.
- Same margin for all sides:
The Margin same for all sides checkbox applies the margin that you have
configured on all four sides of the element. You can unselect tis
checkbox and define different margin for all four sides of the element.
Style options for a tab
The tab can be customized using: (background, border, radius, padding, and margin are same as mentioned above).
- States
- Background
- Border
- Radius
- Padding
- Margin
Icons
States
Customize
the tab to make it distinct at each state. For example, the background
color, margins or background image can be different when the tab is in
Active state, similarly when the tab is in Hover state the borders can
be set in blue color for clear distinction. What does each state mean:
- Active - When the tab is selected.
- Hover - When you hover over the tab name.
- Normal - When the tab is not active or hovered.
You
can also change the font, font size, color, case, strikethrough or set
the text alignment to left, centre or right for each of the above
states.
Name the tab by clicking on the tab and entering the tab name in the text bar under Active state.
Note
- Related lists added to the tab element can't be renamed.
- Click the + icon to add more tabs.
- Right
click inside the tab to insert more fields, fixed or fluid component or
delete the tab. You can also click the close icon to delete a tab.
- Hover over the three bars next to the tab name ( ), when you see the double-sided arrow drag and drop the tab to the desired position.
Icons
The tabs can be represented using the icons. Right click on the tab name and click Show Icon to view and select the icons.
Once the icon is added, right click to Hide or change the icon and Hide the tab name.
Style options for a table, text, icon, and line
For table, text, icon and line the common styling options are
- Border
- Shadow
- Radius
- Padding
- Depth
In addition to this you can perform the following customizations in text, icon, and line.
Text: You can also change the font, font size, color, case, strikethrough or set the text alignment to left, centre or right.
Icon: The icon color, background color, background image, border, shadow, radius, padding, and depth can be customized.
Line: You can set the line to horizontal or vertical, adjust thickness, style, and color.
Style options for the Field label
The field label can be customized using style options as well as by choosing options from within the tab.
- Change the font, font size, color, case, strikethrough or set the text alignment to left, centre or right.
- Align the label to left, top, right, bottom.
- Change the background color, radius, padding, and margin.
- Right
click on the label to change the field, hide label, move the label to
the left or top, fixed or fluid component, copy the style and delete the
field.
Adding style options into presets
Style options can be added to presets by selecting the element in the canvas and right clicking on it.
This lets you style the elements uniformly throughout the canvas, without having to recreate and edit them every single time.