Skip to main content

Focused Tutorials

The foundational steps of the Support Ticket Tutorial, shown above in this Tutorials section of the Developer Portal, have been turned into a template so that users can focus on a specific aspect of the tutorial without having to build up to it with the connected steps. Each of these Focused Tutorials are stand-alone presentations that are built upon that Support Ticket Tutorial template.

To review, the Support Ticket App is a mechanism for end-users to effectively communicate issues through support tickets that describe the problem and determine its severity (i.e., Critical, Major, Normal, Minor).

Temporarily, the instructions for the foundational steps of the app -- Define the Data; Define the User Interface; and Deploy and Run the App -- are shown below. They will be established as a template soon.

0. Create App

The shell for the app needs to be created before you can start to build it.
On the workspace, at the top of the side panel, click + Create App.
Give it a name, like Focused Tutorial - Emails.
Click Create Application.
When you return to the workspace, in the new App Overview, click Edit Application.

When you are finished with the tutorial, simply delete the app instances and the app.

Define the Data

Every app needs a solid foundation to organize and maintain data. Our Support Ticket app will require two types of data:

  • a Codebook, which is a static list of predefined values; and
  • Entities, which can be stored, manipulated and queried in the app database.

1. Create the Codebook Static List

Support Tickets are often defined according to severity: Critical, Major, Normal and Minor. These will not change so they should be defined in a Codebook Static List.

  • At the top of the Data side panel, click (+) Create to get the general Create Dialog; click Codebook
  • Name your Codebook: Ticket Severity. Additional information will appear in the Name (plural) and Code Identifier boxes
  • The Create Display Attribute checkbox shows Name by default. This will be used as a column in the Codebook static list.
  • Click Finish

2. Add Rows to the Codebook

The Ticket Severity codebook needs values.

  • Ticket Severity is open in the editor. Otherwise, it can be found in the Codebooks subsection
  • Click Edit Entries
  • Populate the TicketSeverity grid with values for Code and Name. Copy and paste the grid below:
CRITICALS1-Critical
MAJORS2-Major
NORMALS3-Normal
MINORS4-Minor
  • Click OK to close the dialog box
  • Save changes: Ctrl + S

3. Create the Entities

Entities are where the data is stored. Attributes provide detailed definitions for parts of the entities.

  • At the top of the Data side panel, click (+) Create; click Entity
  • Name your Entity: Ticket
  • Set the Display Icon to Tag. (i.e., type the word into the search bar or scroll through the drop-down menu)
  • Mark the Create Display Attribute checkbox. Click in the text box. Type: Title. This will create an attribute and set it as a display expression for entity records.
  • Click Next
  • The Create Pages box has the following preselected: Create Page, Detail Page and List Page. These pages will be generated and used in the User Interface section (see below)
  • Click Finish

4. Create Entity reference to Codebook

The Ticket Severity codebook needs to be connected to the Ticket entity.

  • In the Ticket Entity Data Definition > References section, click Add New Reference
  • Set Reference Type to: Codebook
  • Set Target to: Ticket Severity
  • Set Default Codebook Value to: NORMAL
  • Click Create References
  • Save Changes: Ctrl + S

5. Add Attributes

There are many additional definitions that can be added as Attributes. For example, it would be useful to know the user who created the Support Ticket, when and, if it is critical, a detailed description of the issue.

  • In the Ticket entity, in the Data Definition > Attributes section, click Add New Attribute
  • Set Attribute Name to: Created By
  • Set Type to: User
    More Attributes are created the same way:
  • Set Attribute Name to: Created Date
  • Set Type to: Date and Time 
  • Set Attribute Name to: Description
  • Set Type to: Rich-text Markdown
  • Click Create Attributes
  • Save changes: Ctrl + S

6. Set Default Values

Created By and Created Date can be further defined. These definitions will establish values for the user and the date when a Support Ticket is created.

Add Default values:

  • In the Data Definition > Attributes section, click the Created By attribute
  • Mark the Default Value checkbox. Click in the databox to get to the dialog box. Set it to the following:
(ticket, db, ctx) => ctx.User
  • Click OK 
  • Click the Created Date attribute
  • Mark the Default Value checkbox. Click in the databox to get to the dialog box. Set it to the following:
(ticket, db, ctx) => DateTime.Now
  • Click OK
  • Save changes: Ctrl + S

Define the User Interface

With a simple data foundation complete, it is time to fill the Ticket Entity pages that were established above: Create Page, Detail Page and List Page.

7. Define Ticket List Page

The Ticket List Page will be a simple list of Support Tickets, with the User, the Time Created and the Severity.

  • In the sidebar, click UI. In the UI side panel, locate the Entity Pages subsection
  • Double-click Ticket List
  • On the Ticket List overview, the Columns tab will show by default
  • Entity detail column is added by default to create a link to the Ticket Detail page
  • Click the (+) Add Column
  • Select the additional columns that will appear: Created By, Created Date and TicketSeverity
  • Click Close
  • Save changes: Ctrl + S

8. Define Ticket Create Page

The Ticket Create page will define how new tickets will be created.

  • In the Entity Pages subsection, double-click Ticket Create
  • In the center of the page, click Add View. When the dialog box opens, click OK
  • In the layout editor add Data Fields. Click Title, TicketSeverity and Description
  • Click OK

Set the Layout so that it can be shared on the Ticket Detail page.

  • In the Layout section, click
  • Click Make Shared
  • Click Ctrl + S

9. Define Ticket Detail Page

The Ticket Detail page will serve as the repository for the Support Ticket. It will use the shared view that was established on the Ticket Create page.

  • In the Entity Pages subsection, double-click Ticket Detail
  • In the center of the page: Click Add View
  • Click Type and chose Shared View from the drop-down menu
  • Verify that View Entity is set to: Ticket
  • Set Shared View to: Ticket view
  • Click OK
  • Save changes: Ctrl + S

10. Application Menu

The User Interface now needs links to create and access tickets.

  • In the UI side panel, locate the Application Menu subsection
  • Click Application Menu
  • Click (+) Add Menu Item
  • Click Menu Item Action. Select List page
  • Set List page to Ticket list
  • Click OK
  • Click (+) Add Menu Item again
  • Set Menu Item Action to: Entity create page
  • Set Entity Page to: Ticket create
  • Change the Menu Item Icon to: + Create
  • Click OK
  • Save changes: Ctrl + S

Deploy and Run the App

The data structure and UI are ready.

11. Release your Application

The initial release of your app establishes the preview and actual iterations. Subsequent releases are updates.

  • On the sidebar, click Release
  • On the Release dialog, type Initial Release
  • Click Release
  • Click Continue to return to the App Builder Editor page

12. Access the App

Now let’s go to the App Overview to see how the app looks. At the bottom of the sidebar, click Close

13. Development app

If the app does not automatically have a Development instance, the following steps will create one:

  • Click + Create Instance
  • On the Create New Application Instance page, set Instance Name to: Boot Camp Development App
  • Verify that Hosting is set to: Jetveo Cloud
  • Verify that Application Type is set to: Development. This will create a Development version that can be used for testing. Later you can create a Production instance with full-scale user management.
  • Set Application Version to the most recent release
  • Click Create This is the way that Production instances are created.

14. Start application

  • Click Start on the instance. It will take approximately 10 seconds.



These steps will have created the basic foundation for the Support Ticket app. Now check it out.

Login Credentials

Go to the Onboarding App Dev Instance overview.

  • Click Settings to open the Application Instance Settings page.
  • Click the Dev Instance tab. This will provide the Test User Email (i.e., test@test.com) and the Test User Password. Copy the password or change it to something memorable.
  • Click Save

Open the App Instance

Click Open Instance to open a new tab. Use the Test User Email and the Test User Password.

 

 

Add to This Basic Foundation

Once you have the foundation of the Support Ticket application, pick any of the related Focused Tutorials to add that element.