Differences

This shows you the differences between two versions of the page.

Link to this comparison view

builder body [2016/09/14 14:19] (current)
Line 1: Line 1:
 +====== Builder Body ======
  
 +===== Interface =====
 +This tab displays the application'​s current page in the Page Grid.
 +{{ :​tab_interface.png?​nolink&​300 |}}
 +
 +===== App Explorer =====
 +This tab displays the [[Application Explorer]] for the application in the Page Grid.
 +{{ :​tab_app_explorer.png?​nolink&​300 |}}
 +
 +===== App Settings =====
 +This tab displays the [[Application Record|Application Settings]] for the application in the Page Grid.
 +{{ :​tab_app_settings.png?​nolink&​300 |}}
 +
 +===== Page Grid =====
 +This is where the display for the selected tab option will be shown.
 +
 +==== Dropping Elements ====
 +Certain elements listed in the Interface Tools are draggable, and can be added to the page using the following method. ​ By clicking and holding down the left mouse button while hovering over the element button on the Interface Tools, you will be able to move the mouse and that button will follow with it.  A grey shadow will appear beneath the mouse to indicate the location that the element will be placed in when you release the mouse button. ​ If there is not grey shadow when the mouse button is released, the element will not be placed.
 +{{ :​pagination_drop.png?​nolink&​600 |}}
 +
 +==== Moving Elements ====
 +When the mouse is hovering over an element, you will see a white bar with a grey outline along the top edge.  When you hover over this bar, the mouse will transform into four arrows in the shape of a '​+'​ with each arrow pointing a different direction. ​ By clicking and holding down on the left mouse button, you can drag the element to a new location. ​ They grey shadow will appear over the current drop loaction as with adding an element.
 +{{ :​page_grid_moving.png?​nolink&​600 |}}
 +
 +==== Resizing Elements ====
 +If you move the mouse to the area between elements on the same row, a verticle dotted line will appear as the border and the mouse with transform into two arrows, one pointing left and the other pointing right. ​ By clicking and holding down on the left mouse button, you can alter the size of the elements as you move the mouse in either direction. ​ The percentage width for the elements will appear above the row.  Release the mouse button to set and save the sizing change. ​ If the mouse should leave the window, it will be treated as if the mouse button was released.
 +{{ :​page_grid_resizing1.png?​nolink&​1000 |}}
 +
 +{{ :​page_grid_resizing2.png?​nolink&​1000 |}}
 +
 +==== Deleting Elements ====
 +When the mouse is hovering over an element, you will see a triangle composed of three red arrows in the upper right corner. ​ Click on this icon to remove the element.
 +{{ :​page_grid_delete.png?​nolink&​600 |}}
 +
 +==== Setting margins ====
 +To add white space on the left and right sides of a row on the page grid, utilize the [[Field Type - Spacer|spacer field]].
 +
 +===== Resizing Left Toolbar/​Page Grid =====
 +If you move the mouse to the border between the [[Left Toolbar|left toolbar]] and the builder body, the mouse will transform like it does when resizing elements. ​ If you click and hold the left mouse button, you can resize the toolbar and the builder body, releasing the mouse button to set to the current size.  Unlike with element resizing, there is no width percentage displayed on the screen.
 +
 +===== Maintaining The Layout =====
 +The interactions made with the tabs and tools that affect the display of the window will be stored as cookies so that they can be maintained when refreshing the page or naviagating to a new page.  Cookies must be enabled on your browser in order to use this feature.
builder body.txt ยท Last modified: 2016/09/14 14:19 (external edit)
Copyright WorkXpress, 2019