Elements
Customize the elements on your screen
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.
Types of elements
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:
Display
Container
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.
List
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.
Card
Divider
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.
Image
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.
Link
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.
Icon
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.
Map
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.
Rating
Progress
QR Code
Adds a QR code to your screen. You can place text or a URL in the Text field.
Video
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.
iFrame
Simple Detail
Text
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
Buttons
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.
Last updated
