Property Panel
Last updated
Was this helpful?
Last updated
Was this helpful?
The Property Panel is located on the far right of the page builder, and is shown in the image below with a solid line around it.
The Property Panel has three main functions: to help you select the right part or container to edit, to style the part you have selected, and to configure the part you have selected, including linking to Functions, Processes, or Data Tables and creating and managing Masters Styles (Design Systems).
At the top of the Property Panel is a series of icons that allow you to easily navigate around the parts of your page.
Below is an example of a footer containing a row with three colored columns in it. Each column has links and text inside. You'll see that when you select a part, you can navigate up (and down) its hierarchy. You will also see that as a part is selected, its associated Property Panel is displayed on the right.
The left and right arrows can be used to move a selected part within a group of parts, such as list items in a menu. If the group is horizontally aligned, the part will move one position left or right, but if the group is vertically aligned, the part will move one position up or down.
The Deselect icon deselects the selected part without having to click on the screen. This can be useful if you have several small parts close together and the orange cursor is blocking your view.
In the example below, the blue column called 'Services' is selected and moved to the right twice so that its position is at the far right of the row. Then, the column is deselected.
The Trashcan icon can be used to delete the selected part.
Each part has a specific set of properties that the Properties Panel will display when it is selected and each property has a specific editor that enables you to configure that part or associated action. Please see the Property Editor Details section for more information.
If a part, like buttons, can perform an action or run a process, the Actions property will be displayed in the Property Panel. There may be multiple ways that the Part can initiate actions, like on click, double click, tab-out, etc., so it’s important that you select the right option.
If a part, like cards, can be linked to data, the Repeat with data property will be displayed in the Property Panel. Simply select the database table you want to dynamically link the part to, and the page builder will automatically repeat that part for the number of rows that exist in the linked table.
You may choose this approach if you have already added and designed your part and wish to map the data manually. It is also possible to create a database table and then automatically add it to the page in various forms, e.g. a card group, a form, or a table. Appeggio’s AI will automatically map the form fields to the columns in the table and attempt to map the columns to the standard fields in cards.
If you have linked a part with a data table, you may want to map specific columns in the table to specific fields in the part or form.
Simply select the part or sub-part you want to link to a specific column in the database table. Go to the database tab in the Property editor for that item and select the column name from the list.
Design systems can be very useful, as they ensure everything has a unified look and feel and users get familiar with the way things work.
It also means if you have designers and developers, the designers can configure the design system in Appeggio for the developers to use, and know that the brand guidelines will consistently be applied, irrespective of who makes the changes.
As Appeggio offers the ability to create full design systems, it is easy to create white-label versions of your apps. Matching any set of brand guidelines by adjusting the masters in one place and having everything change across your app
Select the part that you want to create a Master for, and in the Instance TAB use the property editor to create the style that you want. Then click into the Master tab and name your Master in the Create Master input field.
Once you have added a Master you will see an orange badge appear in the Masters tab to show that there is a Master associated with that part.
Select the part you want to add the Master to, click on the Masters tab, and select the Master you want to apply.
Select the part you want to remove the Master from, click on the Masters tab, and select None (default) from the Masters list.
The up and down select arrows select the parts of the currently selected part, respectively.
If you need to initiate a Process, then select the appropriate Process Function. Please refer to the for more specific information about each Function.
Masters are a very powerful way to control the look and feel of your app, meaning you can set any number of Master styles for different types of parts and have those styles automatically flow through to every part in your app that you have applied that master style to. In combination with the ability to set global fonts, font sizes, and colors in the Settings menu for your app, this gives you the ability to create a full for your app.
