Building your first App

TABLE OF CONTENTS

• Defining an App
• Step 1: Create Your First App
• Step 2: Using the App Overview
• Step 3: Building an interface in the App Studio
• Step 4: Adding Components to Your Interface
  • Add a Text Component
  • Add a Button Component
• Step 5: Customizing Component Appearance
  • Customize the Text Component
  • Customize the Button Component
• Step 6: Adding a Variable
• Step 7: Adding Event Handlers
  • Adding an Event Handler
  • Testing the Event Handler
• Step 8: Creating Workspaces

In this tutorial, you will learn how to create your first App using the CafeX App Studio.

This walkthrough will guide you through the steps to build your first App using the CafeX App Studio. You'll create a simple interface, add Components, use Variables to manage dynamic data, set up Event Handlers for user interactions, and customize the appearance of your App. You’ll also learn to use Workspaces to store user data and maintain App context. Additionally, almost every section will include a link to a more detailed, dedicated article to help you explore specific features or tasks. By the end of this tutorial, you’ll have a functional App and a solid understanding of the tools available on the platform.

Defining an App

CafeX Apps are web applications 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. These 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. This tutorial focuses on building your first App that will serve as a starting point. While it won’t include complex functionality, it will help you become familiar with the CafeX development environment and key concepts.

Step 1: Create Your First App

To create your App:

1. Sign into app.cafex.com.
2. After you sign in, you'll land on the CafeX Home Screen, where your Apps are listed and where you can access them.
   
   
3. From the CafeX Home Screen, click the Create a new App button.
4. Select Create an App.
   
5. Enter an App Name: Training_Your_Name and, optionally, a Description.
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 to have access to it. 
7. Click Add.
   

After adding your App, CafeX takes you to the newly created App Details page, where you can access your App, edit its details, or proceed with further configuration.

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

Step 2: Using the App Overview

When you first open an App, you may see the App Overview screen or be directed straight to the App Studio.

The App Overview page is the starting point for building and managing your App. It provides access to configuration options, such as App Studio, Permissions, Views, and Workspaces. Familiarizing yourself with the App Overview ensures you know where to configure key settings before proceeding.

The App overview screen is composed of two main sections:

• Configure: The section where you can control, manage, and set up your App’s settings and features.
• Workspaces: The section where the Workspaces are listed.

Important: Before proceeding to Step 3, check if you see the App Studio listed under Configure. If you don't see the App Studio, it means your App doesn't have a Custom view. Refer to Creating a Custom View for guidance on setting it up.

Step 3: Building an interface in the App Studio

The App Studio is a low-code/no-code designer that allows developers to create interfaces using drag-and-drop functionality. It's designed to reduce the time spent coding and does not require advanced coding skills. 

You use the App Studio to build your App’s interface. You can add Pages, Components, and configure data access. Once you are familiar with the Components, you can build Apps that perform more advanced functions.

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

Important: If you do not see the App Studio, it is because your App does not have a Custom View. Refer to Creating a Custom View for guidance on setting one up.

The App Studio interface includes the following areas:

• Side Menu: Navigate through different configuration areas of the App.
• Explorer and Component Panel: Add and manage Components in your App. The Explorer tab lists your App’s page and component hierarchy. The Components tab is where you can select items to add to your App.
• Canvas: View your App's Interface and design your App's layout by positioning Components.
• Configuration and Appearance Panel: Customize and configure Components. The Appearance tab is where you can change the appearance of a Component that you select.  The Configuration tab is where you configure Event Handling, Data Sets, and other settings.

For more details, see Navigating App Studio, Design Editor.

Step 4: Adding Components to Your Interface

The App Studio has many different types of Components that you can drag and drop onto the Canvas, each with their own dedicated task. When you reuse dedicated components that you are familiar with, 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. For details about the types of Components, check Adding App Studio Components.

In this step, you’ll add a Text Component and a Button Component to create a simple interactive interface.

Add a Text Component

To add a Text Component:

1. In the Explorer and Component Panel, click Components.
   

2. Under Graphical, select the Text Component and drag and drop it onto the Canvas.
   

3. Select the Text Component, rename it and add text to it in the Configuration Panel:
   
   

   Name	helloWorldText
   Text	Hello World

   
   

   Note: Use clear and consistent conventions to name Components as other Components and events may reference them.

Add a Button Component

To add a Button Component:

1. In the Explorer and Component Panel, click Components.

2. Under User Interface, click the Button Component and drag and drop it onto the Canvas.

3. Select the Button Component and configure the following:

   Name	helloNameButton
   Text	Hello!

   
4. 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.

For a full list of available Components, see Adding App Studio Components.

Step 5: Customizing Component Appearance

You can style Components in the App Studio to enhance the user experience. Let’s customize the appearance of the Text and Button Components.

Customize the Text Component

To customize the Text Component:

1. Select the Text Component.

2. Under Appearance and Configuration, click Appearance and configure the following:
   

   Background	Change the color of the background to your favorite color. Adjust transparency using the alpha slider if needed.
   Border color	Set a matching or contrasting color.
   Border size	Change the size of the border to 8px.
   Corner radius	Change the corner radius to 15px.

   

Customize the Button Component

To customize the Button Component:

1. Select the Button Component.

2. Under Appearance and Configuration, click Appearance and configure the following:
   

   Background	Change the color of the background to your favorite color. Adjust transparency using the alpha slider if needed.
   Border color	Set a matching or contrasting color.
   Border size	Change the size of the border to 2px.
   Corner radius	Change the corner radius to 8px.

   
    

For more details, see Altering the appearance of an App Studio Component.

Step 6: Adding a Variable

Variables are essential for managing dynamic data in your App. They store values or expressions that can be referenced by Components or Event Handlers. In this step, you’ll create a Variable to manage the text displayed by your Text Component.

To add a variable:

1. In the Explorer, click App.

2. Go to Configuration > Add Data Set. 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.
   

3. Create a Data Set with the following parameters:
   
   

   Name	buttonVariable
   Type	Variable
   Expression	Hello World

   
   

To reference the Variable, you use a method called Mustaches. Mustaches {{ }} allow you to bind the variable's value to the Text Component. When the variable's value changes, the Component updates automatically.

1. Select the Text Component.

2. Under Configuration, update the Text field with the following mustaches:

   
   

   {{buttonVariable}}

   
   

   Important: As you type {{, the App Studio will display a list of available variables and Data sets for auto-completion.
   The value of your variable appears in the text box.
   
   

To learn more about the expressions, check Understanding mustaches and expressions.

Step 7: Adding Event Handlers

Event Handlers define actions triggered by user interactions. In this step, you’ll add an event handler to update the Variable of the Text Component when the button is clicked.

Adding an Event Handler

To add an event handler: 

1. Select the Button Component.

2. Go to Configuration > Event Handlers.
   

3. Click New event handler and configure the following:

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

   
   

Once configured, this Event Handler will execute when the Button is clicked. It updates the buttonVariable with the new value, automatically updating the Text Component bound to this variable.

Testing the Event Handler

1. Click Preview () to try out the functionality of the event handler.2. Click the Button in the preview interface. The Text Component should update with the new value of the Variable. 

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 learn more about Event Handlers, check Using Event Handlers.

Step 8: Creating Workspaces

At this stage, your simple creation is not yet visible to App Users. The CafeX Platform provides a framework for hosting data and accessing external resources securely based on the parameters you define or the permissions granted to individual users. While these topics are often complex to address in traditional web applications, 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.

You can create multiple Workspaces for an App, with each Workspace 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 can be configured to exist temporarily or indefinitely, depending on the Apps you are writing. Note that Workspaces can only be part of a single App and it cannot be shared across multiple Apps.

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.

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 App Overview, click Create a Workspace.
   
   
2. Create a Workspace with the following parameters:
   

   Name

   Training

3. Under Workspaces, click your new Workspace: Training.
   
   
   
4. Click the name of your App in the menu bar of your Workspace to display your App interface.
   

To learn more about Workspaces, check CafeX Workspaces, Setting up a Workspace.

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. Later in the walkthrough guides we will show you how to configure how your App Users access Workspaces and your App.