Table of Contents
Grouping items provides an easy way to streamline your Zapp's design and create a more navigable user experience. The Designer offers 3 types of groups:
- Basic Group
- Floating Bar
To create any type of group, navigate to Style mode and select the page that should contain the group. Hold down the Ctrl key on Windows or the Command key on Mac and click on all the items you wish to group. Each selected item will be bordered by a bright blue line.
Once all the items you wish to group are highlighted (each selected item will be bordered by a bright blue line), select the type of group you want from the Group dropdown in the Style toolbar.
A Basic Group enables you to display the selected items close together within the page. The items can be arranged either vertically or horizontally.
Styling a Basic Group
Once captured, you can style the Basic Group by selecting the group and navigating to the Properties tab. Available options are:
- Presets: Choose between a standard or card layout
- Display: Choose a background color.
- Label: Insert a label and style it as desired, including color, font, position, etc.
- Content: Add tooltip text for Zapps that will be viewed on desktop or on mobile devices with accessibility features enabled.
- Margins: Include margins, as required, around each side of the group.
- Borders: Specify border width (per side), radius, and color.
- Box Shadow: Add a shadow effect around your group. Color, x- and y-axes, blur, and spread may all be adjusted.
- Padding: Insert padding, if required, around each side of the group.
Navigate to the Items tab to choose the template for your BasicGroup: Horizontal, Vertical, or Search group.
- Vertical: The default setting for all Basic Groups.
- Horizontal: When grouping your items horizontally, items can be aligned to the bottom, center, or top of the group or stretched to take up the available vertical group space.
- Search Group: Intended for groups consisting of a single input and a single button. This template resizes the controls and inserts appropriate placeholder text (i.e. Search... and GO) as well as a search icon. Note that you need to drag the desired controls into their appropriate position in the ILE.
Each item within the group can also take up a varied amount of horizontal space within the group. To change the spacing, select one of the following options for the desired item under "Group Items."
- Expand: Grows the item to take up all available space.
- Auto: Resize the item enough to fit all of its content (such as a label or icon).
- Custom: Limits the item's width to a fixed number of pixels.
You may also reorder items in the group by dragging them. Clicking the pencil icon for any item in the Group will open that item's In-Line Editor (ILE).
It is also possible to set a Full Group Tap, an action that will be executed when the user taps anywhere within the group. To set the tap action, simply select the desired control from the dropdown. Note: If multiple actionable controls are included in the group, tapping on those controls specifically will take precedence over the group tap action.
For groups that make up a form (i.e. at least one text box and a single button), you may select the "Form must have exactly one button and at least one textbox" checkbox. This setting will automatically click the button in the form when the user clicks enter/go on the mobile OS keyboard, eliminating the need to close the keyboard and click the button.
A floating bar is a group of items that are anchored either to the top or bottom of the screen and is not hidden when the page is scrolled.
Floating Bar Templates
A Floating Bar is useful when, for example, grouping a search bar and a submit button or grouping several buttons for navigation. Several templates are available via the Items tab to tailor your Floating Bar to its particular use case. Options include:
- Search Bar: Intended for groups consisting of a single input and a single button. This template resizes the controls and inserts appropriate placeholder text (i.e. Search... and GO) as well as a search icon.
- Tabs: Offers a horizontal arrangement of several buttons where each button can be then set as selected or unselected, based on the current page. This layout is optimized for navigation.
- Text with 2 Buttons: Appropriate for use cases where the user must choose an option/action.
- Text with 4 Buttons: A more elaborate version of the previous template.
- Any Items: A catch all category for floating bars that may not fit in any of the previous categories. This is the default template.
- Action Bar: Similar to the Search Bar template but enables you to apply different styles to the input and button controls.
When the "Tabs" template is selected, you may style the included buttons to specify which one appears selected by default. To do so, click on the pencil icon to open the button ILE.
Then select the desired preset for the current state of the button on the page.
The result looks like this:
Styling a Floating Bar
In terms of styling, in addition to the options available to a Basic Group, a Floating Bar also has four presets based on the brand color: Light, Light with Border, Shadow, and Dark.
A bubble is a group of items that is grouped under a single button. When the button is clicked the bubble opens as a layer on top of the current page and the background is dimmed.
The bubble button can be placed on the page itself or in the page header to save screen real estate.
Styling a Bubble
To style a bubble, click on the bubble button to open it then click on the bubble itself. Use the "Properties" tab to style the background, margins, border, shadow and padding of the bubble.
Three templates are also available via the "Items" tab: Vertical (default), 2 Columns, and Horizontal.
The button housing the Bubble can also be styled separately by clicking directly on it. Please see Button Styling Options for more information on available options.
Mobile screen space is limited. Collapsible Groups provide another way to optimize mobile user experience by hiding content while still making it accessible to users with a single tap.
To create a Collapsible Group, first add the desired controls to a Basic Group. Then, under Items, you can choose to make the group collapsible by turning on the "Group is collapsible" option.
Once enabled, you can choose whether or not to have the group expanded by default when the page is loaded as well as customize the Collapsible Group Header.
Several options are available for customizing the Collapsible Group Header:
- Custom Static Text: Enter any static text you wish into the ILE and it will appear in the group header.
- Control from the Group: Alternatively, you can choose any of the controls included in the collapsible group to appear in the header regardless of the control type. If additional groups are nested within your collapsible group, the entire group can also be included in the header.
- Icon: You can add any icon from the Capriza library to your Collapsible Group Header. Please note that, by default, the Collapsible Group header icon indicating that the group is expandable is a caret that automatically rotates when the group is expanded or collapsed. You may choose to change the icon, but once you do, it will not animate.
- Background Color: You can change the background color of the header regardless of the other options you've selected.
The remaining items within the Collapsible Group will be arranged in either a horizontal or a vertical layout, based on the selected template.
You may also put a collapsible group in a Floating Bar. Simply select the collapsible group and then select a Floating Bar from the Group menu to anchor it to the footer or header of the page.
Collapsible Groups can also be nested to enable additional levels of organization. Please note that this configuration is recommended only for large form factor Zapps as the small screen size of mobile devices may lead to a less than ideal user experience.
Removing an Item from a Group
To remove an item from a group, go to the group's Items tab and click on the '-' icon to the right, next to the pencil icon.
You can also remove an item by deleting it from the page.
To fully disband a group, select the group and click on Ungroup from the Style tab toolbar.
If your group is a bubble, it is also possible to ungroup it in Simplify mode.
Hover over the bubble button and click on the 'x' in the small toolbar that appears.