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.



    • Popular Articles

    • Forms Designer Quick Start Guide

      Overview Field2Base Forms Designer is the proprietary software application that allows your existing paper forms to be quickly converted to a smart E-form available to your end users via our mobile and web-based Mobile Forms applications. This ...

    • Portal 11.28.2023 Release Notes

      Overview Our release notes offer brief descriptions of product enhancements and bug fixes. We include links to the current articles for any affected features. Those articles will be updated shortly after the Portal release to include new ...

    • Integration Service Configuration Guide

      How To Configure Integration Services To Allow Read/Write Access on a Network Path All of our Integration Products, including the DIM, DUU, and EDM have respective Windows Services responsible for communicating with our server. Occassionally, ...

    • Data Integration Module (DIM) Migration Guide

      Overview This article provides the information necessary to migrate the Field2Base Data Integration Module (DIM) over from one server to another. Please refer to the DIM Install Guide for the initial installation of the Field2Base DIM. Once that's ...

    • How to Check the Version of Integration Products Running on a Windows 10 Machine

      Right-click on the Start menu button. Click on Apps & Features. In the Apps & Features search bar type in the Integration Product you are looking for, eg. F2B Data Integration Module, F2B Data Upload, or F2B Enterprise Dispatch Module. Click to ...