Before we get started, it's important to understand what overall role Forms Builder (FB) is designed to play.

Forms Builder (FB) helps you build what your users will see and interact with and is only intended to configure the portions of Advanced Designer that were previously covered by the Application Wizard. In other words, your new App wont be able to do very much because FB is designed for configuring the look and feel of your forms rather than the business logic or rules.

To expand an App's functionality past this point, you'll mostly do so outside of Forms Builder (FB) on your App's React Advanced Designer (RAD) page. From this page, you can do things like set up routing rules, build email notifications, create buttons and user interface actions, and much more.

It may be helpful to think about the overall App creation process from this macro vantage point:

• Step 1: Use Forms Builder (FB) to create a new App with very basic functionality to collect and store information.
• Step 2: Now that your App exists, use its React Advanced Designer (RAD) pages to significantly expand its functionality. The sky is the limit here!

In this tutorial, we’ll focus exclusively on Step 1.

Our goal in this tutorial will be to create a basic App that handles contract approvals.

When we’re done, our new App will allow users to fill out a simple form to request that an uploaded contract document be routed to a specific person for approval. The form that we’ll create will prompt the user to enter data, like the name of the customer that the contract is associated with, the contract amount, etc. During the tutorial, we’ll create Fields to identify exactly what data a user should enter.

To create a brand-new App, start by browsing to your Onit homepage, clicking the +Quicklaunch button in the top-right corner of the screen, and then clicking Create App.

When prompted to name your App, enter a name that will be meaningful and friendly to your end-users. When you’re done, click Create. As a reminder, this tutorial will be for creating an App for contract approvals.

Go to your app’s Get Started page by clicking on the edit pencil icon to the right of the app name in the left navigation menu.

Next, select the Migrate to Forms Builder button.

A modal will appear to inform you that once Forms Builder is enabled you will no longer be able to use the Wizard and all app data will be migrated to Forms Builder.

Click the checkbox to acknowledge and confirm the migration to Forms Builder.

There are two ways to open Forms Builder once it is enabled:

• Option 1: Select the Go to Forms Builder button on the Get Started page.

• Option 2: A new option at the top of the RAD will appear. Select Forms Builder to launch Forms Builder (FB).

Forms Builder (FB) is broken up into a series of different pages, the first of which is named Forms.

The Forms page enables you to create, delete, and copy forms. In the initial release, there will be three types of forms: root forms, formlets, and embedded grid forms.

• Root Forms: A root form is a standalone form that can be assigned to an app's launch or view form. Tabs are unique to the root form itself, and each tab can have any number of fields added to it. However, if there are many fields, there may be an impact on performance. In cases like this, you can take advantage of formlets to manage the number of fields.
• Formlets: A formlet is a set of fields which can be embedded inside a root form. Formlets help break complex forms into more sizeable chunks to make large forms manageable. You can add any number of fields you want to a formlet. Unlike root forms, formlets do not have tabs. Formlets follow the root form's tab properties.
• Embedded Grid: An embedded grid form allows end-users to quickly edit record information directly from the App Dashboard (or Grid Dashboard).  

By default, new apps created in FB have two root forms named Form 1 and Form 2.

You are only able to open a form by clicking on its name. We won’t do that at this time because we aren’t quite ready to jump to the Editor page. We’ll cover Editor and Preview in more detail later, but for now, note that you need to select a form to use them.

Everyone that interacts with your App will play a specific Role. Using the Roles page, you can define exactly what those roles will be.

For a brand-new App, two Roles will always be created for you:

• Requester: The person that initially creates a Record. In our case, that’s the person who is requesting a new contract be approved.
• Approver: The person who is responsible for reviewing a Record and approving or rejecting it.

To keep things simple for this tutorial, we’ll stick with the default Approver Role as our only approver.

That being said, in many cases, you’ll want to add more approval complexity to your App. For instance, Onit allows you to create multiple “approval” Roles, where each one approves different aspects of the Record (e.g., Legal Approver, Financial Approver, Compliance Approver). Onit allows you to assign Roles conditionally, based on predefined rules (e.g., assign Mary as the Legal Approver if the transaction is worth over $1,000; otherwise assign Jim). The App that we will build in this transaction won’t include these levels of complexity but look for other Onit tutorials that cover these topics.

Before we move on, let’s do one last thing: create a brand-new Role.

Currently, our App will facilitate communication and approval between the Requester and the Approver. This will work fine for us, but let’s say that there is also a third type of user that would like the ability to simply view transactions. This user doesn’t want to necessarily create new Records or approve Records -- they simply want to log into Onit from time-to-time and look through all Records. We’ll call this Role FYI.

To create a new Role, click Add at the bottom-left of FB’s Roles page. Provide the new role:

• Name the Role FYI.
• For Role Type, select Read Only Reviewer.

After you save the new role, you will see it added to the list of roles on the left-hand side. We will assign the role to a tab on a form later in the tutorial so don’t worry about the warning message that “This role is not assigned to any tab on the app’s selected Quicklaunch or Atom/record forms.”

After the role is assigned the warning message will go away. You can check for yourself after you complete the tutorial.

On the Datamodel page, we’ll create the Fields that will prompt our App’s requesters to provide specific information about the Record they are submitting. After a requester populates these Fields on the App's Launch page, the data will be available for viewing and editing on the Record’s View page.

You’ll notice that your new App comes with a few Fields:

• requester_name
• requester_email
• name

These Fields cannot be deleted and will be required for every transaction a user creates. Leave the settings for these Fields as they are and let’s create some brand-new Fields.

To add a new Field, select the Create Field button in the upper left-hand corner or upper right-hand corner of the Datamodel page. Notice that a new, unsaved Field is added to the list of Fields.

By default, a new field’s Data Type will be Text. You can provide each new Field with a different Data Type from the dropdown, a System Name, and a System Label under its Field Settings section. There are many different Data Types of Fields, which can be leveraged to facilitate the information-gathering process for a transaction.

For this tutorial, we’ll create three new Fields:

• Contract document as an Attachment Field, which will allow requesters to upload the contract document.
• Amount of the Contract as a Currency Field, which a requester will use to provide the contract’s dollar amount.
• Department Associated with the Contract as a Combo Field, which will allow an App's creator to list different departments for a requester to choose from.

Additionally, for the Combo Field, we’ll need to provide some options for a user to select. This can be done by adding each of our company’s department names by selecting the +Add Value in the combo Field’s Values property.

You can confirm that the values for your combo field were added by scrolling to the Values column in the Datamodel.

Jumping to the Form Assignments page, let’s review the default options. Form 1 is preselected as the Quicklaunch form and Form 2 is preselected as the Atom/record form. In Forms Builder, you can create independent forms and assign them to a specific context based on the form type:

• Quicklaunch (Launch): Root form that appears when the app is launched and information is requested from a user.
• Atom/Record (View): Root form that appears once a record has been created that displays the information gathered from the Quicklaunch form.
• Embedded Grid: Embedded Grid Form allows users to quickly edit key data from the App Dashboard without needing to open the record.

Using the Atom/record form dropdown, select Form 1. Because we are making a basic app the Quicklaunch form, and the Atom/record form will have the same fields so it will be easier to reuse one form than it would be to create two identical forms.

On the Phases page, we’ll configure the different Phases that we want each of our App’s transactions to travel through. For this tutorial, we’ll keep the configuration simple: we’ll create a Phase to show a transaction is "pending approval" and a Phase to show it has been "approved."

Keep in mind that Phases can be a powerful tool for enhancing the workflow of your Apps. Although this App will require a participant to manually advance through our Phases, Phases can also be set up so transactions automatically advance transactions through them depending on the approval of some or all participants within each Phase. Business logic can also be built around Phases so that transactions will only go through specific Phases when certain conditions are satisfied.

On the Phases page, you’ll notice that there is a Phase already created. Select it so that we can customize it by:

• Renaming it to Pending Approval.
• Unselecting the Auto Advance on Approval Completion checkbox in the Phase Advancement Rules section. This property is used to automatically advance a Record to the subsequent Phase after it has received approval. For this basic app we’ll unselect it and require that our Records be manually advanced.

Click the Save button to keep your changes.

Next, create a new Phase by selecting the Add button to the bottom-left of the screen. Similarly change its Name, this time to Approved, and unselect the Auto Advance on Approval Completion checkbox. We don’t need to assign anyRoles to this Phase.

Save your work and check that the new role was added to the Phases panel on the left-hand side.

Go back to the Forms page and select Form 1 so we can explore the Editor page in Forms Builder (FB). Here you can configure the form itself by adding tabs and fields. This gives you control over exactly what end users will see when they work with your App. It is helpful to keep in mind that when users interact with your app, they will do so in the primary context of creating a brand-new Record from your App’s Quicklaunch form.

For instance, you can organize where Fields and other data is presented to users. Maybe you want to organize the presentation of Fields into visually separated sections on the Launch form. Or maybe you want to only display a certain field on a form on the App’s Record page if a specific condition is met (like a Field’s input equaling a predefined value). These are the types of customizations that you can make from the FB’s Editor page.

Give your form a name by opening the Actions dropdown in the top right-hand side and selecting Edit Form Properties.

Click the Save button to keep your changes. The Form dropdown will also update with the new name.

Remember the FYI role that we created on the Roles page? Let’s assign FYI to this Tab. Select the Create Request dropdown, then select Edit Properties, and then add FYI to the Visible for Roles property on the left. After you see that the FYI role has been added, save the changes. It can be helpful to assign a role to immediately to a tab if you already know what that role will need to access.

Now you are ready to edit what the form will look like by adding the fields that you created in the Datamodel. All the fields that are in the Datamodel are shown on the left-hand side with the three required fields automatically toggled on and showing on the canvas. Either toggle on or drag-and-drop the three fields you created onto the canvas. Notice you can reorder the Fields via drag-and-drop by selecting the vertical three dots that appear when hovering over a Field in the view screen.

In the Field Options drawer, on the right-side of your screen, you can edit the Design properties of the Field including hiding the label, populating empty text, the Field’s color, and size.

You can quickly edit the field’s metadata from the Datamodel on the Field Settings tab in the Field Options drawer. Click “Edit” to make changes, and then click “Save” once you’re done.

If you remove a field from the Canvas, any Design control changes you made will be lost. For example, if the Hide Label option is selected and then you remove the field from the form, you'll have to toggle the Hide Label option back on if you re-add it to the form.

If you forgot to add a field or need to make changes, it is possible to edit fields and to create a new field from the Editor page. Changes to existing fields and new fields created from the Editor page will appear in the Datamodel. However, it is recommended to add fields while on the Datamodel page.

Once you are done creating your form, click the Preview button in the upper right to allow for a side-by-side comparison of the form.

This is the Preview page. Ensure that the Context is set to Quicklaunch form.

An Atom/Record is needed to preview how the Atom/record view appears to users.

On the left is a view of your form in its current draft state and on the right is the current published version of your form (if any).

Click the Editor tab in the top left or the Editor button on the right of your screen to return to the Editor.

Once you are done creating your form and approve of the preview, click the Publish button in the upper right to allow end-users to see and use your Form.

Congratulations! You’ve created your very first App!

Take a moment to play around with it. Launch a new Record and visit it from the App’s dashboard. You can make a comment, add a new participant, edit its details, and change its Phase.

Your new App doesn’t do a whole lot yet, but don’t be discouraged. There’s a lot more you can do to build out the powerful, dynamic solutions your business problems have been waiting for.

And remember: after creating an App using Forms Builder, most of its configuration takes place within the App’s Advanced Designer. Take a dive into our other tutorials to get a feel for the different ways you can enhance your App.