Building your first App

TABLE OF CONTENTS

• Defining an App
• Using the App Overview
• Creating a Custom View
• Building an interface in the App Studio
  • Making use of App Studio Components
  • Using Variables
  • Using Event Handlers
  • Changing the appearance of Components
• Storing App Context in Workspaces

Defining an App

CafeX Apps are web applications that are built and stored on the CafeX Platform and delivered to web browsers. The platform provides organizations and enterprises with secure authenticated tenants. Tenants house multiple Apps for the business solutions and use cases. Business solutions typically involve streamlining, or automating, the interactions between groups of users and groups of Apps with dedicated functions.

As an App Builder, you use the CafeX App Studio to create Apps for App Users. Initially, your first App is not going to do a great deal. It allows you to become familiar with the CafeX development environment, and the environment where your App resides. Most importantly, you are going to see the steps that you have to carry out to create an App.

To create your App:

1. Sign into app.cafex.com.
2. After you sign in, you are directed to the CafeX Home Screen. The home screen is where you can access your Apps.
   
3. Click Create a new App
4. Click Create an App
   
5. Choose an App Name: Training_Your_Name.
6. Select a suitable icon and color for your App. These choices are how the App appears on your home screen and for any App users that have access to use your App. 
7. Click Add.
   

After you add your App, CafeX takes you to the App Overview. As an App Builder, this is where you build your App and make use of the platform’s capabilities. As an App User this is where you can access an App.

This is all you have to do to create an App. However, for the training, pin your new App to the top-navigation bar so that you can access it quickly:

To pin an App:

1. Go to the CafeX Home screen, in the top-navigation bar, click CafeX.

2. Find the App you wish to pin.

3. Click the pin icon of your App ().

You can now begin to create the user interface for your App.

Using the App Overview

When you first open an App, you may see the App Overview screen similar to the following:

The App overview screen is composed of the following:

• Configure - Where App Builders can control, manage, and set up the App.
• Workspaces - Where Workspaces are listed.

Generally, web-applications need somewhere to persist context—this is sometimes a database or a flat file. Workspaces act like persistent sessions for your App that let you store the things you need. There can be many Workspaces for an App, each acting as the isolated session where you can store relevant or private data for the people that use it. Those people might just be a single user, or a group of users collaborating together. In addition, the Workspaces you create may last for a short length of time, or they may last indefinitely depending on the Apps you are writing. Workspaces can only be part of a single App; you cannot have a Workspace being used by two Apps.

You do not need to create a Workspace now. First you are going to create a View for your App. A View is the interface of your App and what App users see when they use it. As an App Builder, you assemble the View with Components, which are pre-built UI elements. These Components help you to standardize development, and ultimately save you time and provide consistency.

Creating a Custom View

You use a Custom View to define your App interface. The Custom View is the definition of your App’s interface and its interaction with local or remote application data. As an App Builder, you know how important it is to create intuitive experiences for your users, so that they can get the most out of it without having to consciously think about the steps they need to take. Typically, it requires you to plan and think about their journey, receive their feedback and make alterations. The App Studio is the tool that you use to build interfaces and expedite this process.

Important: Apps without a Custom View do not have access to the App Studio.

Initially, you are going to create a very simple Custom View made up of a few Components so that you are familiar with the process.

To create a Custom View:

1. From the App Overview, go to Configure > Views
2. Click Add new View
   
3. Configure the following parameters:

   View name	Hello World
   View type	Custom

4. Click Add.
5. After you add your new Custom View, the App Studio option appears in the Configure menu.

Building an interface in the App Studio

The App Studio is a low-code/no-code GUI designer that allows developers to build UIs with a drag and drop interface that reduces the time spent coding and does not require you to have front-end development knowledge. Once you are familiar with the Components you can build Apps that perform more advanced functions. 

You use the App Studio to build your App’s interface. You can add Pages, Components, and configure data access. 

To open the App Studio, from the App Overview Screen, go to: Configure > App Studio.

Important: If you do not see the App Studio it is because your App does not have a  Custom View (see: Creating a Custom View).

The interface presents the following areas:

• The Side Menu—You use this to visit different configuration areas of the App.
• The Explorer and Component Panel—Explorer lists your App’s Component. hierarchy to make them easier to find. Components is where you can select items to add to your App.
• The Canvas—Presents your App Interface. This is where you can add and position Components and adjust the layout.
• The Configuration and Appearance Panel—Appearance is where you can change the appearance of a Component that you select. Configuration is where you configure Event Handling and Data Sets.

Making use of App Studio Components

The App Studio has many different types of Components that you can drag and drop onto the interface each with their own dedicated task. When you reuse dedicated components that you are familiar with, it means that you can reduce the time you spend in development and test cycles. The App Studio categorizes Components by their function; that makes it simple to find the Component that you need for a specific task.

In the following steps, you add a Text Component to provide some context to your interface and then add a Button Component for users to interact with. When the user clicks on the button an event fires that results in the text changing. Although the App is very simple, by the time you complete the task, you are going to be familiar with the process to create Apps and the environment to build them in.

To add a Component:

1. Click Components on the Explorer and Component Panel.
   
   
   
2. Under Graphical, click the Text Component and drag it onto your canvas.
   
   
   
3. If necessary, click on your new Text Component to select it.
4. In the Configuration panel, rename the Component
   
   Important: Other Components and events may reference this Component, so use clear and consistent conventions to name them.
   
   For example: name the Text Component:helloWorldText, to indicate the type and purpose of the Component.
   
5. Click on the Text box and add the following: Hello World.
   
6. If necessary, click Components on the Explorer and Component Panel.
7. Under User Interface, click the Button Component and drag it onto your canvas.
   
8. If necessary, Click on your new Button Component to select it.
9. Under Appearance you can position and resize the Component using the following options:
   • W and H - set the width and height.
   • X and Y - set the positional coordinates.
     
     

     Alternatively, you can use your mouse to position and resize the Component.

10. In the Configuration panel, rename the Component.
    For example: helloNameButton
11. Enter text for the button.
    For example: Hello!
    

Using Variables

You use Variables to store values or expressions in the App Studio. The App Studio presents the App with Variables as a Data Set. Data Sets are the way that the App interface interacts with data in a consistent way. Later, the training covers Data Sets in more detail.

In this section, you add a Variable to your App and use the value of the Variable to set the text of your existing Text Component.

To reference the Variable, you use a simple commonly used method called Mustaches.

To add a Variable:

1. Under Explorer, click App in the left corner. 
2. Click Configuration.
3. Click Add Data Set.
    
4. Add a Data Set with the following parameters

   Name	buttonVariable
   Type	Variable
   Expression	Hello World

5. Click your Text Component.
6. Click Configuration.
7. Under the TEXT field enter the following mustaches:
   

   {{buttonVariable}}

   
   

   Important: As you open the braces, you can see existing Data Sets to help you to complete the Data Set reference.

   

8. The value of your variable appears in the text box.
   

Using Event Handlers

You use Event Handlers to make things happen after specific events occur in your App. You set an event type, such as selecting a table record and then associate it with an action.

In this section, you set an event handler on the button you already have in your App. The event handler assigns a new value of the variable, so that when someone clicks the button the value of the variable changes.

These types of operation are very common in App development, and although the result is very simple, you can apply the same method to more elaborate requirements in your Apps.

To add an event handler: 

1. Click on your Button Component.
2. Go to: Configuration > Event handlers.
3. Click Add handler.
   
4. Add an event handler with the following parameters:
   

   Handler Name	setVariable
   Event type	Click
   Action	Set a variable
   Variable to Set	buttonVariable
   Value to Set	Hello [INSERT NAME]

This is all you have to do. When the variable value changes, your text component on the interface automatically obtains the new value of the variable and your text component is redrawn.  There’s no need to apply any changes to your text component.

Use Preview () to try out the functionality of the event handler when you click your button.

Changing the appearance of Components

The App Studio allows you to apply extensive styling capabilities on components. This eliminates the need for familiarity with CSS-styling and front-end development.

In the next steps, you add styling to the text and button components that are already in your App. This may provide a better user experience for someone using your interface. 

To configure Appearance:

1. Click on the Text Component box in your App.
2. On the Appearance and Configuration panel, click on Appearance
3. Click Background.
4. Change the color of the background to your favorite color.
   

     

   Important: Check that your backgrounds are not transparent, use the alpha slider to change the transparency value.

5. Click on Border.
6. Change the color of the border to your favorite color.
7. Change the size of the border to 8px.
8. Change the border radius to 15px
     

Storing App Context in Workspaces

At this stage no App Users are able to see your simple creation. The CafeX Platform provides a framework for Apps to host data and access external resources securely, based on parameters you provide, or the individual with permission to use your App.  These topics are often complex to address in traditional web applications; however, CafeX manages these aspects for you by providing you with Workspaces as part of your App.

  A single Workspace provides your App with the following:

• Persistent context—A private store where session data can be stored for later use; separate from other Workspaces.
• Permissions—A way of controlling who can access the persistent context behind it.

For example: You may have an App that retrieves medical records from a specific federal state.  You may create one Workspace to retrieve data for Florida and another Workspace to retrieve data for Arkansas.  You may have a pool of workers you assign to the Florida Workspace that are different from those with access to Arkansas.  When you develop the App in App Studio, you can work on a single interface design and know that the Workspaces are private.

See also: Using the App Overview

In this section, you create your first Workspace and act as an App User, so that you can interact with your new interface.

To create a Workspace: 

1. In the Navigation bar, click your App icon.
2. On the App Overview Screen, click Create a Workspace.
   
   
3. Create a Workspace with the following parameters:
   

   Name

   Training

   
   
4. Under Workspaces, click your new Workspace: Training.
   
   
   
5. Click Training to open your View and display your App interface:
   

Later in the walkthrough guides we will show you how to configure how your App Users access Workspaces and your App. For now, you can click the button to try out the functionality.

At this point you have built your first CafeX App!  Although it is simple, you are now familiar with the App Studio, and the process you follow to create an App. Going forward, members of every Workspace, under this App, have access to this interface and the future changes you make propagate for you.