TransForm Tutorial Part 1: Welcome to Alpha TransForm
TransForm Tutorial
Welcome to Alpha TransForm (Part 1) | Using the Alpha TransForm App (Part 2) | Managing Forms in TransForm Central (Part 3)

Welcome to Alpha TransForm! In this 3 part tutorial, we'll walk you through the process of creating, filling, and submitting your first form in Alpha TransForm.

Using this Tutorial

If you have two monitors, we recommend you keep this tutorial open on one monitor while you do the tutorial on the other monitor. Otherwise, simply keep this tutorial open in a tab on your browser.

Create Your Account and Log In

  1. If you do not have a TransForm account, create a new account now by visiting the registration page.

    register.png

  2. After you create your account, you will be logged into TransForm Central. If you want to return and login later, go to transform.alphasoftware.com to return to TransForm Central.

TransForm Central Overview

Once you are logged in, you will see four tabs in TransForm Central: Home, Designer, Permissions, and Management Console.

The Home tab is where you can change your password, change your account name, add users to your account, and perform other account administrative tasks. The Home tab is also where you can get your TransForm API key.

transform4.png

The Designer tab is for building and editing Form Types.

transform6.png

The Permissions tab is an advanced tab for creating different user roles.

permissions1.png

The Management Console is where you can review and export data.

manage1.png

Create Your First Form Type

Let's begin by creating a new blank form. This is done on the Designer tab.

transform6.png

The Designer tab has three sections - a column on the left that lists the Form Types for your account, a Properties column in the center that displays all of the details for a selected form, and a column on the right that shows a Preview of the form.

In the upper right-hand corner above the Preview column, you will also see a Help link. Clicking the help icon opens the help documentation for the Designer tab and contains information on how to use the Designer.

designerHelp.png

 

  1. Click on the Designer tab.

    The first time you open the Designer tab, a message will appear telling you that No Form Types are defined for your account. You will be presented three options:
    • Add blank - Opens the Designer and creates a new application form from scratch.
    • Add shared - Opens the Designer and creates a new application based on a pre-defined template.
    • Cancel - opens the Designer but does not create a new form.
  2. Click Cancel to close the message.
    transform5.png
  3. Next, click the plus + button to add a new Form Type.
    addNew.png
  4. Select Add Blank to create a blank form
    addBlank.png
  5. Alpha TransForm will create a new Form Type with a Display Name of  New Form 1 with a Form ID of Form1.

    The Display Name is the name that will be displayed in TransForm Central Designer and Management Consol tabs. The Display Name is also shown in the Alpha TransForm mobile app.

    The Form ID is a unique ID for the form type to your TransForm account and is used with the TransForm API.
    transform6.png
  6. Type Equipment Inspection in the Display Name text box. This gives the form a meaningful name. 
    transform7.png Note that the Preview window to the right is updated after you change the Display Name and click or tab out of the text box.
    transform8.png
  7. Click the Input Quickstart Text button. This will open the Quickstart designer, which we will use to create our first form.
    tranform10.png
    About the Quickstart Designer

    When you click the Input Quickstart Text button, the Quickstart designer appears. The designer has three sections. On the left is the Quick Reference which contains help information for the Quickstart designer and includes buttons that can be used to set or add fields, headings, or buttons in the Quickstart Text editor. In the middle is the Quickstart Text editor. On the right is the Simple Preview window that displays a basic preview of the form.quickstart1.png
  8. Type or copy-paste the following text into the Quickstart Text editor to add a few basic fields. Each field is defined on its own line in the Quickstart Text editor. 
    First Name
    Last Name
    Address1
    Address2
    City
    State
    ZIP/Post Code
  9. The text you typed (or pasted) defined text input fields to capture the following information: first name, last name, address, city, state, and zip or postal code. Note that the Simple Preview window to the right now shows 7 fields representing each line of text entered in the Quickstart Text editor. This is an approximate preview of what the form will look like. The Simple Preview window shows the label for the field and the field type.
    quickstart2.png
  10. Click on the fields in the Simple Preview window. When a field in the preview window is clicked, the corresponding text in Quickstart Text editor is selected.
    previewClick.png
  11. Now that you understand how the Simple Preview window works, let's build the Equipment Inspection app.
  12. Select all of the text in the Quickstart Text editor and delete it.
  13. Type Equipment Id in the Quickstart Text editor to add a field for the equipment id.
  14. On the next line, type Type of Equipment in the editor.
  15. Click the
     
    button for the :item 1, item 2, item 3 option in the Quick Reference. This will make the Type of Equipment field a list of choices.

    Note that the format of defining a List of options is defined as the field name with a comma-separated list of choices prefixed with a single colon. (Please do not remove the colon or the commas, they are required for the form to work properly)
    quickstart3.png
  16. Change the list of choices to server, router, power supply for the Type of Equipment field: Select the text Small,Medium,Large in the Quickstart Text editor and delete it. Then, type server, router, power supply after the colon to match the image below:
    quickstart4.png
  17. On the next line, type Equipment is Working.
  18. Next, click the
     
    button for the :: Yes,No option in the Quick Reference. This will format the Equipment is Working field as a button list with two options: Yes and No.

    The format of defining a button list is defined as the field name with a comma-separated list of choices prefixed with two colons. "Yes" and "No" are the two options we want for the Equipment is Working field, so we'll keep the default options. (Please do not remove the colons or the commas, they are required for the form to work properly)
    quickstart5.png
  19. Add three more fields by typing Equipment Location, Equipment Photo, and Inspector Signature on separate lines. You can alternatively copy-paste the text below into the Quickstart Text editor:
    Equipment Location
    Equipment Photo
    Inspector Signature
    
  20. Click on the Equipment Location field in the Simple Preview window to select the Equipment Location field.
  21. Next, click the
     
    button for the :location option in the Quick Reference. This will set the field type for the Equipment Location field to "location,"

    A location field is a special field that captures the user's current location and renders it as a map in the form.
    quickstart6.png
  22. Next, click the Equipment Photo field in the Simple Preview window to select the Equipment Photo field.
  23. Next, click the
     
    button for the :photo option in the Quick Reference. This will set the field type for the Equipment Photo field to "photo."

    A photo field is a special field used to capture images on the user's device. It opens the user's camera and lets them take a photo, which is then saved and displayed in the form.
    quickstart7.png
  24. Click the Inspector Signature field in the Simple Preview window.
  25. Next, click the
     
    button for the :signature option in the Quick Reference. This will set the field type for the Inspector signature field to "signature."

    A signature field presents the user with a signature editor that they sign with their finger or stylus. In addition to capturing the user's signature, it also capture the date and time the signature was added.
    quickstart8.png
  26. Let's review the fields to make sure everything is correct. The Quicktext Text editor should match the text below:
    Equipment Id
    Type of Equipment:server, router, power supply
    Equipment is Working::Yes,No
    Equipment Location:location
    Equipment Photo:photo
    Inspector Signature:signature
    

    quickstart10.png
  27. Review the fields in the Simple Preview window to verify that the field types for each field match the image below:
    quickstart9.png
  28. If the fields do not match, compare the text in the Quickstart Text editor to the text below. It should be identical. If it doesn't match, make the appropriate changes.
    Equipment Id
    Type of Equipment:server, router, power supply
    Equipment is Working::Yes,No
    Equipment Location:location
    Equipment Photo:photo
    Inspector Signature:signature
    

    quickstart10.png
  29. After you have verified that the Quickstart text definition is correct, let's save the Equipment Inspection form and try it out on a mobile device. Click the Save link to save the Equipment Inspection form and return to the list of forms.

    Important: Once you save you will no longer be able to edit these fields using the Quickstart method. Instead, you can edit these fields by clicking the Edit Form Commands link (Form Type column) or button (Properties column) on the Designer tab.
    quickstartSave.png
  30. Observe the blue line next to Equipment Inspection (Form1) in the Form Types list. This line indicates the state of the form type. Form types can have one of the following states:
    • No Line - Form type has been uploaded to the TransForm cloud and has no unsaved changes.
    • Blue Line - Form type is new but has not been saved to the TransForm cloud.
    • Orange Line - Form type has been modified but has not been saved to the TransForm cloud.
    • Black Line - Form type has been deleted but has not been saved to the TransForm cloud.
  31. Click Click to save changes to save the new form to the TransForm cloud so that it can be accessed on a mobile device running the Alpha TransForm app.
    quickstart11.png
  32. Wait for the upload to finish.
    quickstart12.png
  33. Review the verification message to make sure it looks similar to the one below then click OK to close the message. This message is shown when Alpha TransForm finishes the upload,

    If an error occurred, review the previous steps and try to upload your form type again. If you need further assistance, contact tfservice@alphasoftware.com.
    quickstart13.png

Now that you have created and uploaded a Form Type, let's go try it out in TransForm Tutorial Part 2: Using the Alpha TransForm App.