Anchors
Anchors are elements that offer a way of organizing data in forms. They allow users to skip to a specific part of the page, separating the crucial information from the rest.
Topics
Overview
Anchors come as a solution to cluttering of a form. Ocasionally a creator might have a form with too much information in it, making it boring and tiresome for their users to navigate. While alternatives to regular zones like collapsible and accordion zones and tabs exist anchors differ from these in the sense that they focus less on the visual aspect of the form and more on the highlighting of a specific part of the page.
Form anchors can appear in two positions of the page. The default - with no altering of the layout variable - will have the form anchors positioned inside of the right sidebar. The second option, better for less populated forms but still with some important information, sets the form anchors positioned at the top of the page.
| Sidebar layout | Top-of-page layout |
|---|---|
|
 |
Configuration
Definition in Genio
Form anchors are very easy to configure. All the user needs to do is open Genio, navigate to the definition of the form that he wants to add anchors to and open a form component of the type "Zone". Zones inside accordion zones work as expected with anchors. Collapsible zones are not supported. Forms that have zones inside of tabs work as expected with anchors as well.
Switching between layouts
The user may chose to switch between the horizontal and vertical anchors layout. To perform this action the user should, in Genio, head to Style -> \
Other details
Anchors can be used to enhance user interactivity with pre-existing Genio patterns. When a form anchor is clicked, the page smoothly scrolls to the corresponding point of the form. Additionally, the element corresponding to the clicked anchor receives focus, which ensures that any accordion zone is properly opened in the selected zone. Furthermore, if the zone is located in a different tab, the client will automatically switch tabs and navigate to that point of the page.
Changelog
The complete changelog of all notable changes made to anchors.
Genio 322.28
- (VUE) New: Initial Vue.js implementation of the form anchors interface elements.