Designing A Page or Form

check-in-button

 

By hovering over the name of the page you created in the Pages & Forms section of MiracleStudio, you will see three options: Open Page Designer, Edit Page, and Delete Page. After clicking the first option, you will be directed to a screen that is split between a blank canvas and a list of design elements.

At the very top of the canvas are two buttons: ‘Close’ and ‘Check Out’.

The ‘Check Out’ feature prevents others from accessing the page or form while you design it and configure its controls.

Clicking on this button will produce three additional buttons:

  1. Check In, which counters ‘Check Out’ and allows all users to access the page/form.
  2. Publish, which publishes the page/form to users’ apps. Alternatively, you can click ‘Publish and Check In’, which combines the functions of both buttons.
  3. Save, which saves the changes you made to the page/form on MiracleStudio but does not implement them in Miracle App.

check-in-button-2

 

To begin designing your form, drag and drop the design elements on the canvas. Here is a detailed explanation of each of the elements you can add.

The following are elements which you can drag and drop in order to design forms and pages.

 1-auto-complete Auto-Complete Text Box The Auto-Complete Textbox is an input field that allows users to view a list of possible text values as they begin typing in it. You can customize this field to either allow users to type custom values or prevent them from entering values that are not part of your list of values.
 2-button Button Button is another input field that can trigger certain actions such as submitting data, saving drafts, and logging in. You will need to specify its action and trigger for it to be functional.
 3-date-picker Date Picker Date Picker is an input field that allows users to enter dates in a specific formatting such as dd/mm/yyyy.
 4-date-time-picker Date/Time Picker Date/Time Picker is an input field that allows users to enter date and time in a specified format such as dd/mm/yyyy and 24-hour format.
 5-label Label Labels are visual controls that are used to display text on the form or page. You can customize their font, font size, font style, and alignment. Labels can also double as input fields if they behave like link labels, i.e. provide hyperlinks such as those on web pages.
 6-picker Picker Picker is an input field that allows the user to select one option from a list of values. It is also commonly referred to as a combo box control.
 7-segmented-selector Segmented Selector Segmented Selector is an input field that allows users to select a value or multiple values from a list of pre-set values. On your page or form, it will appear as a set of buttons placed horizontally. You can determine how many buttons appear per row.
 8-signature-panel Signature Panel Signature Panel is an input field that allows app users to create freehand signatures and use them on the page or form. When a user taps the Sign button, a separate screen opens up to allow the user to create their signature. Once they are done and press Save, the signature will be converted into an image that is scaled to fit the area you designated for the Signature Panel.
 9-slider Slider Slider is an input field that allows users to select from a range of values by simply moving the slider thumb. It is ideally used for values that reflect intensity levels in a form, such as volume and color saturation.
 10-stepper Stepper Stepper is an input field that allows users to increment or decrement to a certain value. You can customize the magnitude of a single increment as well as configure the minimum and maximum values for user input.
 11-switch Switch Switch is an input field that is best used with entries that require Yes/No answers. It allows app users to enter Boolean values by selecting on (true) or off (false).
 12-text-box Text Box Text Box is an input field that allows app users to enter text. You can customize it to have only a single line or show multiple lines. It can also act as a password field if you specify its type as ‘password’. Other aspects you can customize are the Text Box’s visual properties, such as color and size.
 13-time-picker Time Picker Time Picker is an input field that allows users to enter time values. You can determine whether the user enters a 24-hour format or AM/PM 12-hour cycle.
 14-uploader Uploader Uploader is an input field that allows app users to upload different types of files and images from their devices onto a page or form. Currently, the supported file types are:

  • Image: JPEG (.jpg and .jpeg), PNG (.png), GIF (.gif), and Bitmap (.bmp)
  • Audio: MP3 (.mp3), WAV (.wav), and Windows Media Audio (.wma)
  • Documents: Word processing document (.doc and .docx), Spreadsheet file (.xls and .xlsx), Presentation file (.ppt and .pptx), Rich Text Format (.rtf), Text File (.txt), Comma-Separated Values file (.csv), and Portable Document Format (.pdf)

Layout elements are visual controls that give you more control over the organization of standard elements on the page.

 1-box-view Box View Box View is a visual control that is used for creating shapes and rectangular mark-ups such as status indicators and record type identifiers. It can also be used for aesthetic purposes as you can customize its color or include a background image to it.
 2-layout Layout Layout, or Stack Layout, is the most important layout control and the most versatile in MiracleStudio. It allows pages and forms to be laid out in a hierarchy of stack layout controls. Therefore, design elements within each layout control are stacked horizontally or vertically.

You can customize different properties of the Layout control, such as the spacing between child controls, background color, and transparency.

 3-listview Listview Listview is a complex visual control that is similar to Layout except that it features multiple labels. It is used to show elements of a large data set in list format. Also doubling as an input control, it allows users to click an item and view all the details of a selected record. However, a template control needs to be defined in order to show the records in the list.
 4-pager-view Pager View Pager View is a layout control that is perfect for showing a scrollable multi-page form or document. It allows horizontal scrolling by breaking down form fields or information across tabs. On each child of a Pager View is a Layout (Stack Layout) that contains all the controls of a single page.
 5-repeater Repeater Repeater is another powerful layout control that allows you to generate multiple other controls as needed. For instance, if you are unsure of how many images a user can attach to a form, you can use the Repeater Layout to display an ‘Add’ button that allows them to upload several images. They can remove the data they do not want to add through the ‘Remove’ button.

Like the Pager View, Repeater uses a Stack Layout template to create multiple controls. You can customize the layout further by setting a maximum and minimum limit for the number of controls users can add on the fly.

 6-separator Separator Separator is a visual control that allows you to draw a horizontal line on your form or page. While it is mainly used for aesthetic purposes, it can help enhance the readability of pages and forms.
 7-web-view Web View Web View is a visual control that will show HTML content or a web page within the app itself. You can also customize this control to open the page in a native browser on the user’s device like Safari or Chrome.

 

Media Elements entail two controls that are used for viewing images and uploading them to a page or form.

 1-image-view Image View Image View is a visual control that is used to display an image on a page or form. It can also be used as an input field once customized to act like a Button and its trigger is defined.
 

2-image-picker

Image Picker Image Picker is an advanced input field that allows a user to use images which they captured via Camera or already have stored in the Gallery of their devices in forms and pages. Users can then opt to upload these if necessary.
 

barcode

Barcode Reader Barcode Reader is an advanced input field which allows users to scan barcodes using their devices’ cameras.
 

2-image-picker

Location Location is an input field which retrieves a user’s GPS coordinates and adds them into pages or forms.

Reporting elements are visual controls that allow users to view data in an attractive user-friendly way.

 1-cartesian-chart Cartesian Chart Cartesian Chart is a visual control that allows you to display Bar, Column, Line, Bubble, Arrow, Area, and Bezier charts. Through these, app users can easily visualize correlation between elements in the data set defined in the data source.
 2-donut-chart Donut Chart Donut Chart is a visual control that displays statistics and data summary in a user-friendly way. It can be customized by defining different colors for its parts, featuring a legend, and showing labels.
 3-pie-chart Pie Chart Pie Chart is a visual control that visualizes the information of data sets in a summarized form. It is mainly used to show the classification of data into relative sets based on pre-defined criteria. Like the Donut Chart, a Pie Chart can be customized to show labels, a legend, and different colors for each part.