AppMachine Help Center

How can we help you?

Follow

Design your screen with the Layout Editor

When working with one of our data driven blocks like Excel and Web Service you need to design a good looking layout on top of your data. To help you create this layout we have provided you with an easy to useLayout Editor. The Layout Editor helps you compose a layout on top of your data without having to write a single line of code.

You can watch this video to see how this works:

Prerequisites

  • An Excel or Web Service block hosting your data;

Tip: The Layout Editor will automatically detect the data types specified during the import of your Excel document or your Web Service. Based on this data type the appropriate control will be placed.

How To

In this how-to we are using our Flower Shops Demo File (attached to this article).

  1. Go to http://design.appmachine.com and open the app containing either the Excel or Web Service block;
  2. Select the Excel or Web Service block;
  3. At the left side you see all available data fields.
    In the middle you see a preview of your screen where you can design your layout.
    Note: By default we will place one field in your template, often the "Name"field. Feel free to delete it.            Screen_Shot_2014-04-16_at_12.55.27.png
  4. Add fields to your layout by dragging a field from the left pane  to the middle pane. Screen_Shot_2014-04-16_at_12.59.52.png
  • Select a field in the layout editor to change the properties.
  • The left pane will switch to the Properties tab is opened with all the available properties. Depending on the type of field selected, you can have different properties.Screen_Shot_2014-04-16_at_13.08.24.png
  • Change the Position of a field by selecting it in thelayout editor and dragging the field to another position.Screen_Shot_2014-04-16_at_13.15.58.png
  • Resize the field by dragging the horizontal/vertical edge of the field. You can also set the width and height on the properties tab.Screen_Shot_2014-04-16_at_13.17.40.png
  • Select a field and click the red Delete button in the bottom of the left pane to Delete that field.

If you want to change the design of the layout in an advanced way, you can click the Source button. 

You can read all about the tags that can be used in our XML language here. 

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments