Skip to Content

Build Your First App

Overview

This page guides you through building a simple audio-visual equipment tracking app called AV Stock Room. The app would be used by the staff of a media company or department to borrow and return (check out and check in) various items of audio-visual equipment 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, 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 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.)

  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. Add 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:

Field Type Label Visible
on Detail
Visible
on Lists
Other
Lookup Current Checkout Record On On Lookup From: Check Out
Search Type: Starts With
Sort By: Alphabetical

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

Relations

Create these relations:

Singular/Plural Name Module Related Module Relation Type View Type on
Detail Page
Related Field Visible Fields
Checkout/Checkouts Equipment Check Outs One To Many Tabbed Equipment First Name (Employee)
Last Name (Employee)
Status
Checked Out
Checked In
Equipment Checkout/Equipment Checkouts Employees Equipment One To Many Flat Currently Checked Out By Name
Status

(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:

Module Action Type Affecting Field Affecting Field Values Affected Area Affected Section
Equipment Display Status In Use
Returned
Lost/Damaged
Section Usage

(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:

Setting Name Value
Name Create Checkout Record
Description Create record when item checked out
Type Record
Module to Run Equipment
Enable Filtering On
Enable Filtering condition Currently Checked Out By / Not Empty
Record Name Equipment
When Record Is Updated
Run When the Value
in the Related Field
Changes Only
On
Related Field Currently Checked Out By

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:

Create Checkout Record microflow

(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:

Setting Name Value
Name Close Checkout Record
Type Record
Module to Run Equipment
Enable Filtering On
Enable Filtering condition Status / Is / Dropdowns > Status > Returned
Record Name Returned Equipment
When Record Is Updated
Run When the Value
in the Related Field
Changes Only
On
Related Field Status

(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:

Close Checkout Record microflow

UI Flow 1: Checkout Equipment

Create this UI flow:

Setting Name Value
Name Checkout Equipment
Module to Run Equipment
View Any
Related Button Checkout Equipment

(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:

Checkout Equipment UI flow

UI Flow 2: Return Equipment

Create this UI flow:

Setting Name Value
Name Return Equipment
Module to Run Equipment
View Any
Record Name Equipment Return Records
Related Button Return Equipment

(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:

Return Equipment UI flow

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.

Important

Anyone can build and package an app, but only customers with an App Builder license can publish it.