Build Your First App¶

Overview¶

This page shows you how to build a simple app from scratch. The app, called AV Stock Room, tracks audio-visual equipment for the staff of a media company or department who want to borrow (check out) and return (check in) various items needed for their assignments. (The same app is featured in the Jitterbit University App Builder course, but for the sake of simplicity, there is no email reminder feature.)

To build the app, and to learn more about App Builder, work your way through the following sections one by one, previewing and testing the app at regular intervals as you progress. Instructions are deliberately brief, so as to focus your attention on the app's configuration settings. However, there are links to reference pages where you can find out more about each task.

Create a New App¶

1. Create a new app from scratch and configure it using these app settings:

   • Name: Enter AV Stock Room followed by your initials, a date, or any name variation until the Identifier field (next) passes its uniqueness check. (If someone in your organization has taken the Jitterbit University App Builder course, the default identifier, based on the app name AV Stock Room, may already be taken and won't be available on the domain.)

   • Identifier: If the value isn't accepted, change either Name or the first part of the identifier until it is.

   • Description: (Optional) Enter a description for the app.

   • Integration Environment: Select which integration environment this app uses (which API Manager APIs it can access, and which app runtime is used).

   • Language: You can't change this–English is preselected.

   • Culture: You can't change this–en-US is preselected.

   • Icon: (Optional) Select an icon and color to represent the app on the apps page.

2. Review your choices before saving–Identifier and Integration Environment can't be changed once the app is saved.

Domain Model¶

In this section you will build the app's domain model. (Settings not mentioned in this and later sections can be left as their default values.)

Dropdowns¶

1. Create a dropdown with the name Status (to represent the current status of a piece of equipment).

2. Add these items:

   • Available

   • In Use

   • Returned

   • Lost/Damaged

Module 1: Equipment¶

1. Create a module with Singular Name Equipment, Plural Name Equipment, and your choice of icon.

2. Add a section named Usage, with Column Count 2, Open Section On, and Visible on Detail On. Place it between the General and System sections.

3. A dd fields to the General section:

   Field Type	Label	Visible on Detail	Visible on Lists	Required Field	Other
   Dropdown	Status	On	On	On	Dropdown: Status Default Item(s): Available Sort By: Order
   Text (Multi-Line)	Description	On	Off	Off	Large View: On
   Image	Equipment Photo	On	On	Off

4. Add this field to the Usage section:

   Field Type	Label	Visible on Detail	Visible on Lists	Other
   Lookup	Currently Checked Out By	On	On	Lookup From: Employee Visible Fields: First Name, Last Name Search Type: Contains Sort By: Alphabetical

5. Add buttons (with your choice of icon) to the module:

   Label	Color	Visible on Detail	Visible on Lists
   Checkout Equipment	Primary	On	On
   Return Equipment	Primary	On	On

   (A user will use these buttons to check in or out an item of equipment. Each button triggers a different UI flow when clicked.)

Module 2: Check Out¶

1. Create a module with Singular Name Check Out, Plural Name Check Outs, and your choice of icon.

2. Add a section named Usage, with Column Count 2, Open Section On, and Visible on Detail On. Place it between the General and System sections.

3. Add these fields to the General section:

   Field Type	Label	Visible on Detail	Visible on Lists	Required Field	Other
   Lookup	Employee	On	On	On	Lookup From: Employee Visible Fields: First Name, Last Name Search Type: Contains Sort By: Alphabetical
   Lookup	Equipment	On	On	On	Lookup From: Equipment Search Type: Contains Sort By: Alphabetical
   Dropdown	Status	On	On	On	Dropdown: Status Default Item(s): In Use Sort By: Order
   Text (Multi-Line)	Comment	On	Off	Off	Large View: On

4. Add these fields to the Usage section:

   Field Type	Label	Visible on Detail	Visible on Lists	Required Field	Other
   Date/Time	Checked Out	On	On	On	Default Value: Now
   Date	Return Date	On	On	Off
   Date/Time	Checked In	On	On	Off

Module 1: Equipment (Edit)¶

Reopen the Equipment module. Add this field to the Usage section:

(This field is added separately because Lookup fields can't be added unless the module being looked up exists.)

Relations¶

Create these relations:

(These relations let the app user see in the same view the Check Out records (in a separate tab) and Employee records (on the same page) for a selected item of equipment.)

Dependencies¶

Add this dependency:

(This makes an Equipment record's Usage section visible only when the record's Status is Available.)

Application Logic¶

Build the app's application logic, comprising two microflows, and two UI flows.

Microflow 1: Create Checkout Record¶

Create this microflow:

Add these microflow steps:

1. Step type Find Record, settings:

   Setting Name	Value
   Description	Find Employee Record
   Module	Employee
   Record Name	Employee
   Data Read Mode	Read the First Record in the Selection
   Enable Filtering	On
   Enable Filtering condition	Assigned To > Employee Id / Equals / Records > Equipment > Currently Checked Out By

2. Step type Create Record, settings:

   Setting Name	Value
   Description	Create Checkout Record
   Module	Check Out
   Record Name	Checkout

   Pre-added field settings:

   Field	Value
   Name	Records > Equipment > Name
   Employee	Records > Equipment > Currently Checked Out By
   Equipment	Records > Equipment > ID
   Status	Dropdowns > Status > In Use
   Checked Out	Date and Time > Now ... > Today

   (The order of the pre-added fields in your app may be different and is not important.)

   Add this field:

   Field	Value
   Return Date	Date and Time > From the Beginning... > The Day > 5 Day After

3. Step type Set Values, settings:

   Setting Name	Value
   Description	Set Values
   Set Record	On
   Record	Equipment

   Add these fields:

   Field	Value
   Status	Dropdowns > Status > In Use
   Current Checkout Record	Records > Checkout > ID

Connect these microflow steps as shown:

(This microflow creates a check-out record when an item of equipment is checked out, and links it to the user's Employee record.)

Microflow 2: Close Checkout Record¶

Create this microflow:

(This microflow will update a Check Out record whenever an Equipment item is checked in.)

Add these microflow steps:

1. Step type Find Record, settings:

   Setting Name	Value
   Description	Find Checkout Record
   Module	Check Out
   Record Name	Current Check Out Record
   Data Read Mode	Read the first record in the selection
   Enable Filtering	On
   Enable Filtering condition	ID / Equals / Records > Returned Equipment > Current Checkout Record

2. Step type Set Values, settings:

   Setting Name	Value
   Description	Set Equipment Values
   Set Record	On
   Record	Returned Equipment

   Add these fields:

   Field	Value
   Currently Checked Out By	(Leave blank)
   Current Checkout Record	(Leave blank)
   Status	Dropdowns > Status > Returned

3. Step type Set Values, settings:

   Setting Name	Value
   Description	Set Checkout Values
   Set Record	On
   Record	Current Check Out Record

   Add these fields:

   Field	Value
   Checked In	Date and Time > Now ... > Today
   Status	Dropdowns > Status > Returned

Connect these microflow steps as shown:

UI Flow 1: Checkout Equipment¶

Create this UI flow:

(This UI flow will keep the app user's UI view of data consistent with the back-end.)

Add these UI flow steps:

1. Step type Loop, settings:

   Setting Name	Value
   Plural Record	Records
   Message	Your equipment is being checked out...

2. Step type Find Record, settings:

   Setting Name	Value
   Description	Find Employee Record
   Module	Employee
   Record Name	Employee
   Enable Filtering	On
   Enable Filtering condition	Assigned To > Employee ID / Equals / Logged In Employee > ID
   Sorting	ID (Descending)
   Visible Fields	All Fields

3. Step type Update Record, settings:

   Setting Name	Value
   Description	Update Employee Record
   Record	Records[current]

   Add this field:

   Field	Value
   Currently Checked Out By	Records > Employee > Employee Id

4. Step type Wait, settings: Wait For 3 Seconds.

5. Step type Refresh Data.

Connect these UI flow steps as shown:

UI Flow 2: Return Equipment¶

Create this UI flow:

(This UI flow will update the Equipment item's status field to be consistent with the back-end.)

Add these UI flow steps:

1. Step type Loop, settings:

   Setting Name	Value
   Plural Record	Equipment Return Records
   Message	Your equipment is being returned...

2. Step type Update Record, settings:

   Setting Name	Value
   Record	Equipment Return Records[current]

   Add this field:

   Field	Value
   Status	Dropdowns > Status > Returned

3. Step type Wait, settings: Wait For 3 Seconds.

4. Step type Refresh Data.

Connect these UI flow steps as shown:

Configuration¶

In this section you will customize the app to make some small changes to how it looks.

Branding¶

1. Go to Configuration > Branding > Public Page. Click any number.

2. The Public Page settings dialog opens. Enter these values:

   • 2-Title: AV Stock Room

   • 4-Headline: Please log in

   • 6-Button Color: choose a non-default color

   • 8-Main Text:Audio-visual equipment booking system

3. Click Save.

4. Go to App Page, then click any number. The App Page settings dialog opens. Enter these values:

   • 2-Title:Welcome to AV Stock Room

   • 4-Menu Color: choose a non-default color

5. Click Save.

6. Preview the app. Note the following changes:

   On the login screen:

   • The browser's tab label is AV Stock Room.

   • Above the user login name and password fields is the text Please log in.

   • Below the user login name and password fields, the login button is the color you chose on the Public Page tab.

   • At the bottom of the main region of the screen is the text Audio-visual equipment booking system.

   On the app:

   • The browser's tab label is Welcome to AV Stock Room.

   • The menu, buttons, and labels are the color you chose on the App Page tab.

Publish¶

If you want to make the app available to other people in your organization, you can now publish it.