Skip to Content

Quick start guide for Jitterbit App Builder

Introduction

The estimated time to complete this app is 10 minutes

This App Builder Quickstart steps through building a simple Grocery App that allows users to view their app on a smartphone while shopping for groceries, and check items off the list as they go. Building this Grocery App provides a basic overview of working in App Builder and introduces key capabilities and features. For a deeper dive into App Builder, sign up for our Introduction to App Builder course available on Jitterbit University.

attachment

Prerequisites

  • Modern client web browser

    • Chrome: 84+

    • Firefox: 73+

    • Safari: 13.0.1+

    • Edge: 84

App Builder overview

App Builder is a low-code application designed for large enterprises to solve complex business problems at scale. App Builder enables full stack and citizen developers alike to create powerful, end-to-end, enterprise-grade applications with sophisticated logic, workflows, security, and integrations. No code required.

The App Builder platform is designed with simple and intuitive layout and navigation elements. App Builder applications, and the platform itself, are made up of the following core elements:

  • Panel - the basic building block of a page. A panel acts as a container that presents information to the user.

  • Page - a page is made up of at least one panel, and may contain a collection of panels.

  • Control - represents what the panel displays. Examples include text, a button, image, etc.

Navigating App Builder is similar for developer and application end users alike, with the exception being a developer user will see more options available. The following diagram illustrates the key ways to navigate App Builder.

attachment

App Builder is platform agnostic. This means it can be run on any modern browser and is fully mobile-compatible. It can be accessed on any operating system and can connect to data sources from virtually every major database service provider. Furthermore, the App Builder platform is developed with a responsive design. This means the platform will run and be viewable on any size screen or resolution and is automatically optimized for mobile.

For more information see the App Builder user guide.

Create a new application

To get started we will use the Create New Application wizard, an advanced intelligent wizard that guides you through the process.

attachment

  1. Log into your App Builder environment with your provided credentials

  2. Click the + App button from the Site Menu

  3. Provide a Name for the app. For example: Grocery App

    Note

    Name must be unique within an App Builder environment

  4. Click the Create App button

App Builder will now run in the background and create the scaffolding needed for an application. Once finished, you will be taken to the application Home page. Scaffolding created includes:

  • Microsoft SQL Server data source

  • Parameter table to store variable data

  • Home page

  • Parameter page

  • Parameter (Business Object)

  • Navigation menu

Create a product table and pages

First, we will create a Product table to store our product information. In this section we will use the Table wizard and Page wizard, advanced intelligent wizards designed to simplify processes.

attachment

  1. From the app Home page, go to the Action Drawer > Design Center

  2. Click + Table from Data Storage Layer

  3. Select the Table Builder and click Next

  4. Enter a Table Name and click Next. For example, Product

  5. Click the Add Title button and click Proceed

  6. Click the Add Column button

  7. Provide a Name for the column. For example, Purchased

  8. Set the Logical data type for the column. For example, Boolean

  9. Click the checkmark icon to save

  10. Click the Add Column button

  11. Provide a Name for the column. For example, Quantity

  12. Set the Logical data type for the column. For example, Number

  13. Click the checkmark icon to save

  14. Click Next

  15. Review the proposed updates and click Generate Pages

    Note

    App Builder automatically appends system columns and creates views to help manage your data

  16. Select Home as the menu the new page will be linked from and click Next

  17. Select Grid and Form as the page types and click Next

  18. Review the proposed updates and click Create Pages

Create product records

After creating the Product table and corresponding pages, App Builder brings you to the Product form page where you can enter records to store in the Product table and use by the app.

attachment

  1. From the Product page, enter a Product name. For example, American Cheese

  2. Leave the Purchased field unchecked

  3. Enter a numeric Quantity value. For example, 1

  4. Leave Is Active checked to indicate the Product is available

  5. Click the Save button

  6. Click the panel x to exit out of the Product screen

  7. Click the Create button to add additional records

  8. Follow the steps to create Product records for the following, using Quantity values of your choice: Apple Pie, Hamburger, Rolls, Napkins, Vanilla Ice Cream

Modify the app user interface

Typical apps contain several tables, business rules, tables, and much more data, but we are simplifying this app build to provide a quick illustration of App Builder's capabilities. Revisiting the defined app requirement, we want to view the app on a smartphone while shopping for groceries and check items off the list as we go. Here we will make a few updates to the default information to make our app even more user-friendly.

  1. From the Products page go to the Action Drawer > Live Designer

  2. Select the Purchased control from the page view

  3. Click the Position & Width tab in Live Designer

  4. Click the left arrow icon next to Change Position to move the control to the left of Product

  5. Click the Label tab and select Hidden for Label Visibility to hide the control Label

  6. Click Save

  7. Select the Is Active control from the page view

  8. Click the Control Properties tab in Live Designer

  9. Uncheck the Active field and click Save to hide this control from the panel view

  10. Click to select the Products panel from the page view

  11. Change the Panel Name to Grocery List (or another meaningful name)

  12. Click the Update Methods tab in Live Designer

  13. Select Excel for Edit Method to support direct editing of records

  14. Select Inline for Insert Method to append new records to the Products page

  15. Select Last Row as the Insert Position to define where the new record will appear

  16. Select No for Delete Supported to prevent records from being deleted

  17. Click Save to apply changes

  18. Select the Home panel from the page view

  19. Click the Edge Case tab in Live Designer

  20. Expand the General section, uncheck the Active field, and click Save to hide this panel

  21. Click the x to close out the Live Designer

Set the app home page

App Builder automatically sets an app Home page to the first page a developer adds. To modify this setting, we will go through the App Workbench, a centralized location providing quick shortcuts to everyday tasks required for building and maintaining apps.

  1. Navigate to the Action Drawer > App Workbench

  2. Click the More button from App Settings

  3. Select Edge Case

  4. Click the Regions - Controls tab

  5. Set the Home Page to the page containing your Grocery App

  6. Click the x to exit the popup

  7. Confirm the update by navigating to Action Drawer > Site Menu, double-click to launch your app from the Site Menu

You have finished building your first simple app! At this stage, you can run the Grocery App on a smartphone or any other device. There are many ways this simple app can be augmented. Examples include adding a Department table and mapping Products to Departments, adding a Price column to the Product table and tracking prices over time, and adding a List table to store and reuse lists.

To learn more about App Builder visit Jitterbit Success Central and take our Introduction to App Builder course available on Jitterbit University.

Resources