Elements
Customize the elements on your screen
Last updated
Customize the elements on your screen
Last updated
You can use AppMachine's preconfigured blocks to add data to your app, or you can dive deeper and design your screens down to every last detail. To use our Element Editor you need to add a Blank page, List, or Detail Block to your app. You can then use our drag and drop screen editor to configure your screen.
AppMachine offers you various types of elements to add to your pages:
Display, including text and button elements
Form elements
Card elements
Almost every element has the following basic settings which allow you to style the screen in anyway you want:
An element used to hold other elements. Can be used to define/contain components that you create so that you can more easily move, edit, or manipulate them.
Creates an ordered list from data made available to the app in the Data section.
Depending on the data available, the list generated will contain the different data types like Container, Repeater, Labels, and Links. The data types/elements can be toggled on and off and are then reflected in the design of the element.
Creates a line that can be used to separate elements or content on your screen. You can change the color and thickness of the divider in the element's Properties.
Upload your own image with our image selector.
Set Width and Height using - Auto - Fill - Fixed , set amount of pixels - Flex, set fraction of the width of the screen. Is only applicable if you have multiple elements in a horizontal aligned container.
Background size (Fit, Contain and Cover) will only have effect when both Width and Height are not set to Auto. - Fit will show the whole image - Contain will adjust the image to the set Height - Cover will adjust the image to fill the Width
Is Clickable enabled will offer customers the option to open the image in a lightbox for additional zooming.
Place a link in your screen.
Use the Type property to determine whether the link is shown as text or as a button. Use the Title property to create the text that is shown as a link (or as the text on the button). Set the Link Type to classify the link (and its resulting behaviour) as a Site, Email, or Phone. You can also choose whether the link opens in the app or externally.
Allows you to place an icon in your screen from a preselected library of icons. Select the icon design from the dropdown menu, determine the icon's size, its color, and the label.
The dropdown menu for icons contains a vast array of searchable icon types and styles.
Add a map to your screen.
You can add an Address, a custom Marker Image, a custom Location Label, you can toggle on or off the ability to zoom in the map, you can select the Zoom level, Fix the position of the map, and show the location of the app user.
Adds a QR code to your screen. You can place text or a URL in the Text field.
Allows you to place a video in your screen.
In the properties, you can define the URL of the video, whether the video autoplays, whether the controls of the videos are shown, and whether the app can be shown full screen.
All the text elements have settings to influence the font, color and size of the text. These are the default fonts to use to make your app look the same in every screen. For example a Headline element gives you the option to add a text , and it uses by default the Headline font which is set in the green Theme block. If you want to add more variation to your screen you have the option to choose another font style, change fontsize, fontcolor, Bold, Italics or alignment.
NOTE : We do advice you to mostly use the default options offered in the dropdown, to maintain uniformity in your app.
Display
Heading
Title
Body
Label
Rich text
Add a button to your screen and add Events to initiate an action. Set
Text
layout
Background of your button.
Primary button uses the primary color as the backgroundcolor
Secondary button uses the secondary color as the backgroundcolor
Action button is shown as an overlay at the bottom of the screen and will always be visible.
