Layout Builder
The "Layout Builder" section (aka the User Interface Builder section) is where you will design how your pages will look like in a WYSIWYG (What You See Is What You Get) mode. You will use a combination of various interface elements to build the layout of the page and you will define which data should be displayed where and which actions should be triggered when the user interacts with the page (e.g. when the user clicks on a button), ...
Note: Before starting to create the interfaces of your application in Infinable, it is recommended to first draw sketches of all the pages. Infinable is not suited for quick brainstorming on the design of an app and paper or traditional design tools (Sketch, Figma, Balsamiq...) will be better for this phase. Infinable comes after this ideation phase when you have a better idea of what you want to build as the design and prototyping tools don't allow you to actually create the web application for real usage.
On the left sidebar you have 6 sections:
If you click on the first icon (plus in square), you get the list of interface elements that can be added to the page. There are different categories of elements:
- Layout Elements: elements that are used to create the structure of the page and define the hierarchy of elements (e.g. left sidebar, navigation bar at the top, main panel, ...). A container element will contain other elements to create a group (e.g. the navigation bar at the top of the page contains multiple other elements, it is a container)
- Visual Elements: elements that are responsible for displaying some information on the page (e.g. an image, a text section)
- Form Elements: elements that let you build forms to get input from the end user
- Dashboard & Maps: elements that let you present information in a more complex way (e.g. charts, maps...)
You will see in the reference section tutorials on how to use some of these elements.
You have the possibility to add additional interface elements by installing plugins in your application (e.g. payment form with stripe, commenting form with Disqus...)
If you click on the second icon (tree), you get the hierarchy of the elements that have been added to the page with parent/children relationships. It allows you to select specific elements and reorder elements.
Elements Tree to visualize the parent/child hierarchy of interface elements
c. Design System Library
If you click on the third icon (folder open), you get a quick access to the elements of the design system of your application. A design system is a central place for all the common styles and interface elements that will be used in your app. You will get more details about it in the Design Systems section.
If you click on the fourth icon (cogs), you get the list of all the workflows that have been created for this page. We will see later in the Application Workflows section what are workflows and how they can be configured to use dynamic data and define application logic and interactions.
e. Variables
If you click on the fifth icon (database), you get the list of global and page variables that have been defined. We will see later in Dynamic Data section how to use variables to store dynamic information, how to use these variables in interface elements and workflow nodes.
f. Page Settings
If you click on the sixth icon (sliders), you will be able to edit the settings of the page (name, url, url parameters, root status and SEO settings. View Update Page Settings section to get more details.
The main panel is where you will drag and drop interface elements and then update their properties with the right sidebar to achieve the page design you want.
You can select an element on the panel by clicking on it (you can also select it with the elements tree on the left sidebar) to edit its properties. If you right click on an element, a context menu appears with quick actions (edit properties, delete element, group elements in container, add dynamic properties...).
This is where you will configure all your UI elements.
Once an element has been dropped on the application page, you can click on it to edit its properties: e.g. on the first image, you see the headline "WELCOME HOME" selected with the properties configuration sidebar visible.
At the top, you can update the name of the element. This can be useful when the number of elements on the page increases. By choosing appropriate names (e.g. "Navigation Bar", "Main Header", ...), you will get a more organized structure for your page and when visualizing the elements hierarchy tree it will be easier to know what is each element.
There are different sections for the properties definition:
- Content of the element: this is where you define what should be displayed in the element and the general properties. In our example above, we need to define the text of the header and the type of header (H1, H2, H3...).
- Style of the element: this is where you configure how the element should render visually: e.g. for a button, you can define the size, background color, the font size and color, the border...
- Interactions and Dynamic Properties of the element: dynamic web application need to handle interactions triggered by interface elements (e.g. when the user clicks on the button, go to a specific page...) and dynamic properties for the elements (e.g. repeat an element based on some data, show/hide an element based on a property in the data...). All of this is handled with workflows and variables as we will see later.
On the left of the topbar there is a navigation breadcrumb. If you click on the app name you go back the application map section and if you click on the page name, you can edit its name.
In the center, you have the different breakpoints (desktop, tablet, mobile landscape and mobile portrait) to handle Responsive Design of your page. You can go to the Responsive Design section of the Reference to learn more about how to make sure your app renders well on different screen sizes.
On the right, you have first have an indicator of whether the interface design has been saved yet. The save action is triggered regularly but you can also trigger it manually by clicking on the save button. Then two buttons allow to Undo/Redo the actions performed. The last two buttons allow to Preview the application (preview the page you are editing) and Deploy the modifications once you are satisfied.
Last modified 3yr ago