Creating Buttons

Creating Buttons

Overview

Buttons can be used to navigate between pages of the Form, show embedded images, link to a web page or kick off a function in your custom Form script. This article describes how to add buttons to your Forms.


Tutorial Video 

A tutorial video is also available and covers most of this material.




Adding a Button

1. Click on the Form tab on the menu ribbon at the top of the screen if the tab is not already visible.

2. Select Button from the menu ribbon.


3. Determine where you want to place your button. Holding down the left mouse button, draw a box on the Form starting at the top left corner and ending at the bottom right corner. You have to ability to move and resize your button at any time.

4. Let go of the mouse button to complete your button. This will open the Button Properties dialog box and allow you to customize your button.

5. Customize the text and appearance of your button on the Display tab. 

Display Tab


A. Text - Add the text you would like to be displayed.

B. Customize your text.
      Font : Select the font.
      Size : Select the font size.
      Bold : To embolden the text of the button, check mark the Bold option.
      Italic : To italicize the text displayed on the button, check mark the Italic option.
      Underline : To create a line underneath the text, check mark the Underline option.
      Font Color : Select the font color. The default color is black.

C. Customize your button as needed. (Available in Mobile Forms versions 7.0 +)
      Background Color:  Select the background color.
      Border Color:  Select the border color.
      Border width:  Select the border width (in pixels).
      Border Radius:  Select the border radius (rounds the corners of the button).
      Opacity:  Select the opacity percentage. 
6. Click on the Action tab to choose the action that you would like your button to take.

Action Tab

Call a subroutine in script 
Note: This action requires knowledge of JavaScript.
Type the function name from your script into the field to execute a JavaScript subroutine when the button is clicked. For example, the button could display a message then submit the Form.

Show an embedded image resource
Click the Browse button and select an image from your local files to display that image when the button is clicked. For example, clicking the button could display an image of a building floor plan. 
 
Change pages in the form
You can use this button action to facilitate page navigation for your Form Users.

A. Go to the next page - This will take the User to the next visible page in the Form.
B. Go to the previous page - This will take the User to the previous visible page in the Form.
C. Go to a specific page - This will take the User to the page you select from the page window.
Open a web page
Enter the link for the website you want to display in the empty field to open a web page when the button is clicked. For example, clicking the button could open a web page with the latest weather or traffic information.

You can check the "Use Web View in the App" checkbox to open the web page in the Mobile Forms App instead of opening the page in the default browser.  (Available in Mobile Forms versions 7.0 +)
7. Click the OK button to finish creating your button.