Editing your app
High level customisation of branding, images and colors, and editing of other common features.
The simplest way to get your app out there is to choose a template, and then customise and edit it to make it look and feel authentically yours.
In this section, we’ll go through some high-level customisation of branding, images and colors, and editing of other common features.
Before we get into customisation, it’s important to understand editing toolbars.
A halo toolbar is shown above a part when it is selected. This halo toolbar shows actions specific to the type of part selected as well as common actions. In the image below, a halo toolbar is shown for a card:
In the image below, you'll see a text halo toolbar:
Here’s an icon halo toolbar:
And an image halo toolbar:
You'll notice that the toolbars are slightly different, and that's because the actions for a card are slightly different from the actions for editing text, for icons, for images, and so on. The halo toolbars only show what's relevant to the particular part you've selected.
As you move the mouse over an icon within the halo toolbar you will see a ‘tooltip’ that describes what the action will do. Most tooltips will contain a letter or meta-key and a letter indicating what keyboard shortcut you can use to invoke the actions. For example ‘Add a Part (A)’ indicates that the A key can be used as a keyboard shortcut.
The common halo toolbar actions are described below:
Tool | Action |
|---|---|
| Add. The + icon anywhere in Appeggio will allow you to add a part. The shortcut key for Add is the A key. |
| Go to parent. A part that contains another part is called a ‘parent’ part or containing parent part. We call it parent for short. Click the icon to select the parent. |
| Part dropdown. By clicking on this dropdown you’ll see the range of functions you can apply to change the part. |
| Color of part. Allows you to change the color of the part using the color picker tool. |
| Color of text. Allows you to change the color of the text using the color picker tool. |
| Weight of text. Allows you to adjust the weight of the text within the part. |
| Alignment of text. Allows you to adjust the alignment of the text within the part to left, centre or right. |
| Size of text. Allows you to adjust the size of the text within the part. |
| Density. Allows you to set the density of the part. |
| Preset size. Choose the preset size of the part. |
| Style variation. Set the style variation of the part. |
| Link. Click to link the part to an existing or new screen within your app, or to an external URL. |
| Align vertical. Vertically align the part. |
| Align horizontal. Horizontally align the part. |
| Column span. Select the column span of the part. |
| Actions menu. Allows you to delete, duplicate, cut, copy, paste, undo as well as other actions depending on the type of the part. |
As you move the mouse over an icon you will see a ‘tooltip’ that describes what the action will do. Most tooltips will contain a letter or meta-key and a letter indicating what keyboard shortcut you can use to invoke the actions. For example ‘Click to Add a Part (A)’ indicates that the A key can be used as a keyboard shortcut.
Every halo toolbar has a dropdown menu tailored to the part being edited. Like the halo toolbars, only the editing options that are relevant to the part are available.
When you open the dropdown menu, there are some options that are always available. These are “General” part settings, Actions, Data and Visibility.
When it comes to editing, the one you will typically use is the General part settings, as shown below for a card part:
This is where you can edit all aspects of the part you have selected.
Actions is where you specify a chain of events. For example, when you have a user signup function, you can specify what happens at each point in the process. When a user signs up successfully, you may set a trigger to notify them that their sign up has been successful, and what their next steps might be. Alternatively, if their signup failed, you may set up a notification indicating that the signup wasn’t a success. The actions part allows you to tailor all of the key events that can occur when an action is taken.
Data allows you to connect the part to a source of data. For example, if you have a collection of data - say a restaurant menu including images, descriptions and pricing of dishes - you can connect your data to display it.
Visibility allows you to set access to the part based on the audience. For example, you might have different access to parts of your app based on whether the user is signed up or not, or has paid a premium for particular material. You may also have a different level of access for those who administer your app.
Actions
Data
Visibility
#halo #toolbar #halo toolbar #editing appeggio #editing an app #dropdown #actions
Last modified 7mo ago