📄Blank Page
You can now add a Blank Page block to your app with which you can create and entirely customize your own screen and add new elements easily.
Adding the Blank Page building block
Click the red + Block button.
Select the Advanced tab.
Select the Blank Page block and click Add this block.
Fill in the name of the block and click on Add this Block.
Click on the icon if you want to change the image used in the menu. * Replace allows you to choose from a wide range of AppMachine icons or upload your own. * Delete removes the icon so that only text is used (in this case "Gigs") is presented in your app's menu.
Using Elements Mode to build your Blank Page
Elements mode can be accessed by clicking on the "Edit in Elements mode" button under the General settings or, while the Blank Page block is selected, clicking on the Elements section above the block tree.
Adding Elements to your app
To add a new element to your app, click on the blue + Add Element button.
You will see a window appear with three sections; Your Components, Components, and Display.
Your Components: In this section, custom components (or a collection of Elements) that you have created and saved will appear in this section.
Components: These are collections of Elements with a specific design or purpose/functionality that have already been created for you by AppMachine.
Display: These are the individual Elements with which you can edit your Blank Page block with design elements or information that you want to display.
A great way to get started with building components in your Blank Page block is reviewing or understanding how the Components were built that we have already made available by AppMachine in the Components section.
Below, the Component "What's New" has been added to a Blank Page block.
The "What's New" component is comprised of a title and a list with three items. Each item has it's own icon to illustrate the item.
The entire component is contained in a Container element. This allows you to organize your designed components on the screen and to easily move entire components with the Element tree.
You can see below how the "Item 2" Container element has been moved to the end of the list now.
Element Properties
As you can also see, each Element has its own set of Properties that can influenced. These Properties appear when you select an Element in the Element tree.
These Properties can include:
Layout: Allows you to change the Width, Height, Margin, Padding and Gap as relative to other Elements.
Background: Allows you to change the background of the selected Element.
Border: Give the selected Element a border and define the radius of the border, the width, and the color.
Other: Give the Element a name for easy identification, a visible label, and turn the element's visibility on or off with the toggle.
Now that you've analyzed how one of AppMachine's Components has been built, try building your own screen(s)! If you run into any issues, don't hesitate to contact AppMachine support.
The Blank Page building block settings
The Blank Page building block editor is composed of two editing screens: General and Design.
The settings in the Settings editing screen are empty here as the entirety of this block is edited in Elements mode. Click on "Edit in Elements mode" to edit the content of this block. The settings in the Design screen influence those settings that you want to be different than those selected in the Theme block.
Settings
There are several aspects of your Blank Page block that can be changed in this screen:
The name of the block
The icon (or image) that will be used in the app menu
Should the need arise to keep the users of your published app from using this portion of the app, then you can always make use of the ON/OFF selector.
Change the selector to OFF to keep users from seeing the Blank Page block. Now you can continue developing your app without worrying about users coming upon areas that you haven't finished developing as of yet. Once you are satisfied with your progress, change the selector back to ON to publish this portion of your app.
Last updated
