TABLE OF CONTENTS

• Leveraging Data Sets
  • Understanding When to Use Data Sets
    • Importing a Prepared App 
    • Required Files
    • Importing the App Definition File
    • Setting Up the Workspace
    • Preparing a Custom View
  • Configuring and Updating Data Tables
    • Configuring a Data Table Schema
    • Configuring a View for a Data Table
  • Retrieving and Presenting Data
    • Adding a Data Set
    • Configuring a Table Component to Simulate an Email Box
    • Displaying Data Fields in Components
• Integrating External Applications
  • Reviewing the External Data Source Configuration
  • Adding Search Functionality
    • Enabling Search
  • Evaluating Data Sets Automatically
    • Configuring Data Set Evaluation
    • Chaining Data Set Evaluation
    • Applying Business Decisions Using Rulesets
    • Evaluating Ruleset Data Sets
• Enhancing the Capabilities to Your App
  • Configuring App Navigation
  • Writing Records to a Data Set
  • Handling App User Events
  • Handling Button Events
• Styling the Provider Enrollment App

This guide walks you through the process of building and enhancing an App in CafeX App Studio. Step by step, you'll learn how to configure data sets, connect to external APIs, manage user interactions, and apply interface styling.

You’ll begin by learning how to leverage data sets—adding, configuring, and presenting data from various sources. Next, you’ll integrate external applications by connecting to APIs and dynamically evaluating data. You’ll then enhance your App’s capabilities with navigation controls, form submissions, and event handlers. Finally, you’ll learn how to apply styling to create a polished, user-friendly interface that enhances the overall user experience.

Leveraging Data Sets

In this section, you'll learn how to use Data Sets to retrieve, present, and manage data in your App.

Understanding When to Use Data Sets

In Building your first App, you created a basic App to become familiar with the CafeX process and environment. Now with that understanding, you will create an App that makes use of Data Sets and external web APIs.

To learn how to use Data Sets, this article walks through a simplified Provider Enrollment use case from the U.S. medical system which is responsible for controlling, tracking, and monitoring of medical service providers, such as doctors, pharmacists, and hospitals. Each of these providers must complete a process called provider enrollment before they can offer their services through a healthcare insurance network. 

Provider enrollment is a very complex, multi-step operation that includes multiple processes that sometimes can span days or weeks. It involves verifying credentials, licensing, and other critical data. The process often peaks at certain times of the year, for example, when new professionals complete their academic training and enter the workforce.

For the purposes of this article, you are going to create an App that allows an agent to:

• Process emails sent by healthcare providers.
• Check the provider’s current status.  
• Submit new enrollment information to the health insurance network.

All of this is done through a single interface.  

The intent of this App is to speed up the handle time and the response accuracy by automating retrieval and cross checking of data from a single interface without the need to swap between applications. 

Importing a Prepared App 

To help you get started quickly, this section uses a set of pre-built resources that include all the necessary configurations for the App you'll be working with. Instead of building everything from scratch, you'll import an App definition file that includes the required settings, such as interface layout, Data Table schema, and connections to external web APIs.

Later in the article, you’ll learn how to export and share your own App definitions. But for now, you’ll focus on importing definitions to explore how the App is structured and how it interacts with external data sources.

Required Files

Download the following training resources before you begin the walkthroughs:

• appstudiotrainingv3.zip – Contains the complete App definition.  
• base64attachment.txt – A sample encoded email attachment used later in the tutorial.

Important: Do not unzip the appstudiotrainingv3.zip file. The App Studio requires it to remain in its compressed format for the import to work correctly.

Importing the App Definition File

To import an App: 

1. On the CafeX home screen, click Create a new App.
2. Select Import from a file, and choose appstudiotrainingv3.zip.
3. Click Open.
4. Enter the following parameters:

   Name	Provider Enrollment - [INSERT NAME]

5. Click Add.
6. CafeX takes you to your newly created App.

Setting Up the Workspace

Now that you’ve imported the App, you’ll create a Workspace to provide context for your Provider Enrollment App before building your Custom View.

A Workspace serves as a container for testing and viewing your App. Any changes you make to your Views or App configurations will automatically apply to existing Workspaces. This means that even though you haven’t created your Custom View yet, any updates you make to it later will immediately reflect in this Workspace.

To create a Workspace:

1. Under Workspaces, click Create a Workspace. 
2. Create a Workspace with the following parameters:

   Name	Provider Enrollment

3. Click Create Now.

Important: This workspace will be referred to as your Provider Enrollment Workspace throughout the article.

Preparing a Custom View

To build your interface, you’ll need to create a Custom View. For details about Custom Views, check the Creating a Custom View article.

To create a Custom View:

1. From the App Overview Screen, go to Configure >  Views.
2. Click Add new View and enter:

   View name	Provider Enrollment Email App
   View type	Custom

3. Navigate to Configure > App Studio.
4. Click Page 1, then rename the page to Inbox in the the Appearance and Configuration panel.
   
5. Go to Explorer > App to proceed with further App configuration.

Configuring and Updating Data Tables

In this section, you'll define a Data Table schema within your Workspace to simulate an email inbox for processing provider enrollment emails. Each row of the table represents a single email that you can interact with. 

CafeX Data Table is a set of records associated with your Workspace. They allow you to store private data. Table fields can hold a variety of complex data types, including references to Users, Workspaces, and uploaded files. 

To learn more about Data Tables, check the Data Tables article.

In a real-world scenario, this inbox would likely be populated through a workflow that pulls messages from a dedicated mailbox or a workforce management system. However, to keep things simple, you’ll use a simple schema that mimics inbox behavior, without needing to learn the Workflow engine just yet. This approach lets you focus on working with Data Tables directly. Each row of the table represents an email and each Workspace has its own inbox.

Configuring a Data Table Schema

To configure a Data Table schema:

1. In App Studio, click Data Tables ().
2. Click Add new table and enter the following parameters:

   Table Name

   Inbox

3. Click Add.
4. Click on Inbox. The row expands.
5. Click Add new field. You have to repeat this process for each field to add.
6. Add the following fields:

   Field name	Field type
   Body	Short text
   Subject	Short text
   From	Short text
   Attachment	Short text
   Date	Date

   
   
   For example:
   
   

At this point, you have made a table schema and each Workspace that you create has its own tables with this identical schema.

Configuring a View for a Data Table

To add data to your Inbox Data Table, you’ll first need to create a Grid View. Grid Views allow you to interact directly with Data Tables within a Workspace, for example, to view, edit, or add records.

In this section, you'll populate your Inbox table with two mock emails. Since each Workspace has its own instance of the Data Table, make sure you're modifying the table within your Provider Enrollment Workspace.

At this point, there are no rows in your table. For the purposes of this article, you’ll add two sample records to simulate incoming emails.

To create a Grid View:

1. From the App overview, go to Configure >  Views.
2. Click Add new View and add a new View with the following parameters:

   View Name	Inbox
   View Type	Grid
   Data source	Inbox

To add rows to a table:

1. Open your Provider Enrollment Workspace. 
2. Click the name of your App in the menu bar of your Workspace.
3. If you see your Custom view, select Inbox to open the Grid View.
   
4. Click Add a record and enter the following example data:

   Field name	Data
   Body	Hi, Can you please check the status of the following provider’s enrollment? NPI is 123456789.
   Subject	Provider Enrollment
   From	myemail@CafeX.com
   Attachment	Copy and paste text from base64attachment.txt
   Date	04/18/2025

5. Click Add a record.
6. Repeat steps 4 – 5 to enter details for a second mock email, change the fields as you like.

At this point, you now have some preparatory emails that your provider enrollment App can make use of. While this setup is artificial, it gives you a practical understanding of how a Workspace can hold data objects relevant to the session that your App uses. In this example, you're working with a single table, but more advanced Apps can use multiple data tables that cross-reference each other to represent more complex workflows.

Retrieving and Presenting Data

Data Sets are the foundation for how an App interface interacts with various types of data. As an App Builder, Data Sets provide you with a consistent way of interacting with different types of data, whether it's from a local Data Table or an external web API. When building your interface in App Studio, you simply wire interface Components to the relevant Data Set, without needing to concern yourself with the underlying data source. You configure the Data Set to retrieve or write data to the specified source.

The following table shows the different types of Data Sets you'll be working with:

To learn more about Data Sets, see Configuring Data Sets.

Adding a Data Set

In this section, you add a new Data Set to retrieve the data from your Data Table.

To add a Data Set: 

1. In App Studio, go to Explorer > App.
2. On the right side of the page, click Configuration.
3. Click Add Data Set and add a Data set with the following parameters (the data source for this Data Set is the Data Table you created in earlier steps):

   Name	emailsDataSet
   Type	Data Table
   Data Source	Inbox

4. Click Add.

In your interface, Table Components are used to display data in rows and columns, and are especially useful when you need to show multiple records or portions of records simultaneously. Table Components are useful when you need to perform searches or compare different records. In this article, you’ll configure a Table Component to replicate an email inbox, displaying the necessary information about incoming emails.

Configuring a Table Component to Simulate an Email Box

In this section, you will add and configure the Table Component to simulate an email inbox, so that users can review the emails coming into the queue.

To configure a Table Component: 

1. Go to the Components section of the Explorer and Components Panel.
2. Under Data, locate the Table Component and drag it onto your canvas.
3. Click on the new Table Component and rename it to inboxTable.
   
   Important: As before, use consistent naming for your Components. As you build your App, you’ll start referencing these Components in various configurations. Consistent naming saves time and helps prevent errors. Throughout this article, it’s important to use the exact names provided—this will make it easier to follow the walkthrough and troubleshoot any issues that arise.
     
4. Configure the component as follows:

   Read-only	ON (Toggle to blue)
   Data Set	emailsDataSet

You set this table to read-only since at this point you only want to display records and prevent App Users from editing data.

When selecting your Data Set, you may notice other available Data Set options. Those are system Data Sets that include useful information such as the current user, the current Workspace, or tenant details. You won’t use these additional system Data Sets in this article.

Once the Data Set is linked to your Table Component, the columns automatically reflect the schema from your Data Table. As an App Builder, you don’t need to manually map each data field—the App Studio handles that for you across all types of Data Sets. If you want to hide certain columns from the interface, navigate to Configuration > Fields and toggle the Visibility setting for any field you'd like to exclude.


Important: The data you see in tables and forms while working in App Studio is not pulled from your actual Data Sets. Instead, App Studio uses placeholder (artificial) values. This behavior is intentional—it allows you to safely test and design your interface without exposing real or sensitive data. As an App Builder, you use the artificial data to be confident with the interface in your App, without having access to real data.

Displaying Data Fields in Components

In this section, you’ll add Components that make the body of each email easier to read. The App Studio manages a lot of the interactions for you. All you need to do is to create a Text Component and associate it with the correct Data Set.

When a user clicks on a row in the inbox Table Component, CafeX automatically evaluates the selected row and displays the corresponding email body in the Text Component. If the user selects a different row, the Text Component updates accordingly to reflect the new selection.

To reference a Component: 

1. Navigate to the Components section of the Explorer and Components Panel.
2. Under Graphical, locate the Text Component and drag and drop it onto your canvas.
3. Click on the Text Component and rename it to emailBodyText.
4. Go to the Configuration section and add the following for the Text field:
   

   {{inboxTable.0.Body}}

Important: When you add a Table Component, the CafeX App Studio automatically creates a corresponding Data Set for that interface element. This Data Set represents the current state of the Table Component.

The Text Component doesn't reference the inbox Data Table directly. Instead, it references the Table Component’s state using mustache syntax ({{ }}). Because Data Sets behave like tables, they can hold multiple records. When you reference the Table Component, you typically want to access the selected row. This means that the expression {{ inboxTable.selected[0].Body }} retrieves the Body field from the first selected row of the Table Component named inboxTable.

You now have a Text Component that displays the body of an email when a user clicks on a row in the inbox Table. To test the interaction, exit the App Studio and return to the App Overview Screen. From there, navigate back to your Provider Enrollment Workspace to interact with the interface you’ve built.

To exit the App Studio and return to the App Overview Screen, click .

Integrating External Applications

At this point, you should be familiar with CafeX App Studio, the concept of a Workspace, and how Data Sets formalize interactions with data. In this article, you'll build on that foundation by integrating with an external web API that returns JSON—allowing your App to pull in provider information from a third-party directory.

Because CafeX manages API authentication and communication for you, you don't need to write code to connect or authorize requests. You simply use External Data Sources, which are already configured for this article in the Sample Workspace. To learn more about External Data Sources, check the External Data Sources article.

Important: For the purposes of this article, you do not need to configure an External Data Source, as they have already been set up for you. You can use these steps for future development. 

The API used in this article is a simple RESTful API that you can use to retrieve information about providers. Your App will use this to let your App User search for provider information based on NPI or MCD, so that they can complete the tasks that the email contains.

You use the following endpoints in the article:

Reviewing the External Data Source Configuration

Although setup is not required for this article, you can explore how these External Data Sources are defined:

1. Go to Configure > External data sources ().
2. Select any of the External Data Sources and click Edit data source ().
3. Under Configuration, you'll find the JSON that defines how your App connects to the API.
4. Under Schema, you can see the expected data structure returned from the endpoint.

When you configure an External Data Source, you can use Extract Schema to have CafeX call the endpoint and parse the data object. 

Adding Search Functionality

To enable search in your App, you need to collect parameters from the user and use them to evaluate a Data Set linked to an External Data Source. This allows users (such as agents) to search for providers and view relevant information in real time.

CafeX provides Form Components that submit parameters to a Data Set. When parameter values are set or changed, CafeX evaluates the Data Set and updates the App with new results. Just like Table Components, Form Components use the Data Set schema to determine which fields to display, and you can choose which ones are visible to users.

Enabling Search

To enable search functionality, you'll need to:

1. Add a Data Set to search on.
2. Add a Form Component for entering search criteria.

3. Configure the Data Set to use form fields as parameters.

4. Add a Table Component to display the result of the search.

Step 1: Add a Data Set

To add a Data Set to search on:

1. Go to Explorer > App.
2. In the Appearance and Configuration panel, click Configuration.
3. Click Add Data set.
4. Add a Data set with the following parameters:

   Name	searchProviders
   Type	External API
   Data Source	getProviders
   Operation	GET

   
   

   This prepared external data source returns an array of providers when you search using an NPI. You can skip the parameters for now—they’ll be set up later.

5. Click Add to save the Data Set.

Step 2: Add a Search Form 

To add a search form: 

1. First, add a Text Component as a title for your Form:
   1.1 Under Graphical, select the Component and drag it onto your canvas.
   1.2 Rename the Component to searchFormTitle.
   1.3 Set the Text field to: Provider Search.
   
2. Add a Form Component to your View:
   2.1 From the Data section in the Components Panel, drag a Form Component onto your View.
   2.2 Click the new Form Component and rename it to providerSearchForm.
   2.3 In the Configuration panel, configure the following:

   Search Form	ON (Toggle to blue)
   Data set	searchProviders

   

Forms in CafeX can either display Data Set results in a read-only format or act as input mechanisms by setting parameters that trigger Data Set evaluation. In this example, the form is used to collect user input—such as an NPI or Provider Name—and submit it to the searchProviders Data Set. Once the form is submitted, CafeX evaluates the Data Set by sending the input parameters to the API. The API then returns an array of matching providers based on the search criteria.

Step 3: Set Data Set Parameters

To ensure the Data Set correctly uses the relevant fields, you need to configure the providerSearch Data Set to reference the fields from the providerSearchForm, as the Data Set may evaluate data from multiple sources.

 To set Data Set parameters: 

1. Go to App > Configuration > Data Sets.
2. Click the searchProviders Data Set.
3. Set the NPI and Provider name parameters to:

   NPI	providerSearchForm > NPI

   

4. Toggle NPI to Required.

The parameters you configure here tell CafeX when to evaluate the Data Set. In this case, the Data Set is evaluated when the App User submits the form. The Required option tells CafeX not to evaluate the Data Set unless that parameter has a value. 

When the interface is no longer waiting for the input values of a Data Set, CafeX can evaluate it. CafeX evaluates Data Sets with GET operations when the following criteria are met:

• The Data Set has no parameters—It can evaluate immediately.
• None of the Data Set parameters have assignments—The interface is not waiting for an  input.
• Only when all required parameters have values—The interface is not waiting for an input.

Important: CafeX evaluates a Data Set when all of the required inputs have values and subsequently when any input value changes. If you do not configure any inputs as being required, the Data Set evaluates immediately on page load.

Step 4: Add a Results Table

Now, you will configure a results table, so that you can display the results of the Data Set.

To add a results table:

1. In App Studio, go to Explorer and Components Panel > Components.
2. Under Data, locate a Table Component and drag and drop it onto your canvas.
3. Name your new Table Component: providerSearchResultsTable.
4. Under Configuration for your table, set the following:

   Read only	ON (Toggle to blue)
   Data Set	searchProviders
   Data Path	providers

   
   
   For example:
   
   

Important: The data shown in the table in the App Studio is not the data from the endpoint. As you have already seen, App Studio provides artificial data for Data Sets so that, as an App Builder, you do not need to invoke endpoints to begin formalizing your design. 

Summary

You’ve now built search functionality into your App. While the API in this example is simple, the approach works for more complex scenarios. CafeX automatically handles schema generation, input/output mapping, and endpoint invocation based on your Data Set and UI configuration.

Try the search in your Provider Enrollment Workspace. The training API returns two records for any NPI value.

Each search result has an MCD value, which can be used to retrieve detailed provider location information.

Evaluating Data Sets Automatically

In this section, you will add a second external data source to allow your App Users to retrieve additional provider information. Typically, searches return enough data to help users select the correct record, and then the application performs a read operation to retrieve the full record. Since the API for searching providers only returns the provider's name, your users will need more detailed information. To address this, your App requires a second Data Set to retrieve the full provider record. 

Configuring Data Set Evaluation

To configure Data Set evaluation, you need to complete the following steps:

1. Add a new Data Set that will evaluate when a user clicks a row from the results table.
2. Add a Form to display the entire provider record.

Step 1: Add a Data Set

To add the new Data Set:

1. Go to Explorer > App.
2. In the Appearance and Configuration panel, click Configuration.
3. Click Add Data Set.
4. Add a Data Set with the following parameters:

   Name	additionalProviderInformation
   Type	External API
   Data Source	readProviders
   Operation	GET

5. Set the MCD Data Set input parameter to:
   providerSearchResultsTable > mcd
   
   This links the MCD output from the providerSearchResultsTable to trigger the Data Set evaluation.
6. Set MCD to Required.

Step 2: Add a Read-Only Form

To configure a read-only Form: 

1. Navigate to Explorer and Components > Components.
2. Under Data, locate the Form Component and add it to your canvas.
3. Click on the new Form Component and rename it to additionalProviderForm.
4. Under Configuration for your Form Component, set the following:

   Read only	ON (Toggle to blue)
   Data Set	additionalProviderInformation

At this point, you have an App with search functionality and the ability to view full provider records.

If you preview your App, you can see that the artificial Data sets evaluate as you expect:

If you go to your Provider Enrollment Workspace, you can try it as an App User.

Chaining Data Set Evaluation

In the previous section, you saw how the output of one Data Set can be used as the input for another without writing any code to handle the parameters manually. For example, the second Data Set evaluated when a user selected a row in the results table. However, CafeX also allows you to evaluate Data Sets automatically, without requiring any user input, by chaining evaluations together.

Chaining is particularly useful when working with APIs that don’t return all the required information in a single response. It enables your App to fetch additional data, so users don’t have to wait. For instance, if users typically perform a follow-up request after an initial search, and that follow-up takes time, you can configure your Data Sets to trigger automatically based on the first response. 

Chaining a Data Set means using the output of one evaluation to automatically trigger another. App Studio supports both parallel and sequential chaining, allowing multiple Data Sets to evaluate dynamically without user interaction. 

At this point, you have a read-only form that displays detailed provider information, automatically populated based on the row selected in the results table. Return to your Provider Enrollment workspace to try out the full flow.

Applying Business Decisions Using Rulesets

Rulesets are a way for business users to manage business rules that represent business decisions. Rulesets are another form of CafeX Data Set that apply conditional logic to inputs to produce a fact set. The CafeX Business Rules Engine enables business users to define and manage decision logic without writing code or requiring development cycles. 

A Ruleset is a special type of Data Set that applies conditional logic to its inputs and returns structured results, known as facts.

A Ruleset is composed of:

• Input Facts – the inputs, or the values you evaluate.

• Result Facts – the outputs.

• Conditional Rules – the logic that connects inputs to results.

In this section, you’ll configure a Ruleset that evaluates the number of days remaining on a provider’s license. If the value is fewer than 5 days, the Ruleset makes a business decision to alert the user.

Accessing and Reviewing the Ruleset 

To access Rulesets: 

1. Go to Configure > Rulesets.
2. Open the existing Ruleset titled Days Remaining Alert.
     

This Ruleset is preconfigured to show an error message when a provider's license has fewer than 5 days remaining.

In the configuration for the Ruleset, you define the Facts and the Rules of your business rule.

After you configure the ruleset, you can use Test Ruleset to check the logic by inputting sample values and checking the expected outcome.

Connecting the Ruleset to Your App

As with other evaluations, your App uses a Data Set to evaluate the Ruleset.

To configure a Data set: 

1. Go to Explorer > App > Configuration.
2. Click Add Data Set. 
3. Add a Data Set with the following parameters:

   Name	daysRemainingDataSet
   Type	Ruleset
   Ruleset	Days Remaining Alert
   daysRemaining	additionalProviderInformation > expiration (Required)

   
   This Data set evaluates as soon as the days remaining value is available from the additionalProviderInformation Data Set. If the license expires in fewer than 5 days, the Ruleset returns a true response and includes a warning message.

4. Click Add.

You can now reference this Ruleset to display a warning to an agent when a provider’s license is about to expire.

Evaluating Ruleset Data Sets

In this section, you configure a Text Component to display a warning message when the Ruleset evaluates to true—specifically, when a provider’s license is close to expiration.

1. On the Inbox Page, add a Text Component onto your canvas.
2. Rename the Component to licenseWarningText.
3. In the Text field, enter the following Mustache expression:
   

   {{daysRemainingDataSet.0.errorMessage}}

The Text Component references the Data Set and displays the errorMessage defined by the Ruleset if the condition is met. 

Note: In App Studio, no warning message appears unless the Ruleset condition is met. 

Enhancing the Capabilities of Your App

This section focuses on adding interactivity and advanced behavior to your App. You’ll learn how to configure navigation, submit data using forms, respond to user events, and trigger actions with buttons.

Configuring App Navigation

App Studio allows you to create multiple pages in your interface. Multiple pages allow you to provide smooth accessibility of all the functions and Components in your interface. 

In this part of the training, you'll add an additional page that allows an agent to submit a provider’s enrollment.

To add the submit functionality, complete the following steps:

1. Add an additional page and navigation menu.
2. Add the Data Set to enroll a Provider.
3. Add a Form to submit the enrollment.
4. Show a confirmation message.

Step 1: Adding an Additional Page and Navigation Menu

To add an additional page: 

1. In the Explorer > App panel, right-click on the App name.
2. In the context menu that appears, select Add Page.
   
3. Click Page 2 under App.
4. In the Configuration panel, rename the page to ProviderEnrollment.

As an App Builder, you can use the Navigation component to automatically display links to the pages in your App. This means you don’t need to manually create menu items for navigation.

In your App, users will need:

• One page to read their email and perform a search.

• A second page to submit the provider enrollment form.

It’s also common in web applications to include a header that stays the same across pages. You’ll now add a header to your App and include the Navigation component within it.

To add a Navigation Component:

1. On the canvas, click Add Header.
2. In the Explorer and Components > Components, go to the User Interaction section.
3. Drag and drop the Navigation component into the header.
4. Select the newly added Navigation component.
5. In the Configuration Panel, rename the Component to pageNavigation.

The Navigation Component automatically keeps track of all the Pages in your App, or you can set them manually.

Writing Records to a Data Set

In this section, you’ll enable App Users to submit an enrollment form on behalf of a Provider. To achieve this, you need to complete the following steps:

1. Add an external Data Set that uses the HTTP POST method to send data to an external system.
2. Add and configure the enrollment form.

 Step 1: Add a Data Set for Submitting Enrollment

1. Go to Explorer > App, select your App.
2. In the Appearance and Configuration panel, click Configuration.
3. Click Add Data Set.
4. Add a Data set with the following parameters:

   Name	enrollProvider
   Type	External API
   Data Source	postEnrollmentForm
   Operation	POST

5. Click Add.

Step 2: Add and Configure the Enrollment Form

In this step, you'll add and configure a form that allows the agent to enroll a provider on the enrollment page. You'll add a form to your page and use the postEnrollmentForm Data Set. 

To configure an enrollment form: 

1. Select the ProviderEnrollment Page from the Explorer.
2. Go to the Explorer and Components > Components.
3. Under Data, drag the Form component onto the canvas.
4. Rename the Form Component to enrollmentForm.
5. Under Configuration for your table, configure the following: 

   Data set

   enrollProvider

    
   

   
   

The steps for configuring a form to submit data are similar to those used when configuring a form to read data. However, in this case, the Data Set fields are writeable, meaning you can set values for each field that will be sent in the request.

Before you can use the Form, you have to update the enrollProvider Data set to evaluate with the field values. This time, the evaluation submits a POST request to the endpoint instead of the GET used previously for reading records. 

To enable form submission, update the enrollProvider Data Set so that each field maps to the corresponding input on the enrollmentForm.

Handling App User Events

In this section, you configure a confirmation message that appears after an App User submits a provider enrollment form. To control the visibility of this message, you create a Variable Data Set and use an Event Handler to update it after form submission.

To complete this configuration, follow these steps:

1. Add a Text Component to display the confirmation message.

2. Create a Variable Data Set to control the visibility of the message.

3. Set up an Event Handler that updates the variable after form submission.

4. Use a Mustache expression to bind the variable to the Visible property of the Text Component.

Step 1: Add a Confirmation Message

To add the confirmation message:

1. Click the ProviderEnrollment page, if necessary.
2. Under Components > Graphical, add a Text Component onto your enrollment page.
3. Rename the Component to enrollmentNotificationText.
4. Configure the following:

   TEXT	Enrollment Form has been submitted

Step 2: Add a Visibility Variable

To add a visibility Variable Data Set:

1. Go to Explorer > App > Configuration.
2. Click Add Data Set.
3. Add a Data Set with the following parameters:

   Name	showEnrollmentSubmitted
   Type	Variable
   Expression	false

This variable determines whether the confirmation message is shown. Initially, you set the expression of the variable to false, but it will change to true after successful form submission. 

Step 3: Add an Event Handler for Form Submission

An Event Handler lets you define an event type and the corresponding action to take, for example, when someone clicks a button or submits a form, you can set a variable or trigger another behavior. As an App Builder, Event Handlers allow you to define what should happen in response to user interaction. To learn more about Event Handlers, check the Using Event Handlers article.

In this case, you'll configure the handler to run after the form is submitted, and set the visibility variable to true.

To add an Event Handler:

1. Click ProviderEnrollment Page, if necessary.
2. Select the enrollmentForm Component.
3. In the Configuration panel, go to Event Handlers.
4. Click Add handler and add an event handler with the following parameters:

   Handler Name	enrollmentEventHandler
   Event type	Form submitted
   Action	Set a variable
   Variable to Set	showEnrollmentSubmitted
   Value to Set	true

This Event Handler will update the variable to true whenever the user submits the form.

Step 4: Bind Visibility to the Variable

Each Component has a Visible property, which controls whether the component appears on the interface. You can dynamically manage this property using a Mustache expression to bind it to a variable. 

In this step, you'll bind the Visible property of the enrollmentNotificationText component to the showEnrollmentSubmitted variable to hide a Text Component until the Variable evaluates as true.

To configure visibility:

1. Click on enrollmentNotificationText component.
2. In the Appearance section of the Configuration panel, locate the Visible property.
3. For Visible, enter the following expression:
   

   {{showEnrollmentSubmitted}}

Now, the component becomes visible when the showEnrollmentSubmitted variable is set to true. The enrollmentEventHandler updates this variable after a user submits the enrollment form.

Handling Button Events

In this section, you add a button to display an email attachment. Providers often include license documents to their emails as attachments. Although you can make the attachment appear without requiring a button, this example is designed to demonstrate how to use the Button Component together with Event Handlers.

To complete this configuration, follow these steps:

1. Add a Variable Data Set to show or hide the attachment.
2. Add an Image Component to display the attachment.

3. Add a Button to trigger the image display by updating the Variable.

4. Create an Event Handler that sets the Variable when the button is clicked.

5. Bind the Image Component’s visibility to the Variable using a Mustache expression.

Step 1: Add a Visibility Variable

To add a Variable:

1. Go to App > Configuration > Add Data Set. 
2. Add a new Data Set with the following parameters:

   Name	openAttachment
   Type	Variable
   Expression	false

This variable will be used to control the visibility of the image component.

Step 2: Configure the Image Component

The attachment field in the inboxTable contains the provider’s license image encoded in base64. The Image Component supports base64, URLs, and uploaded files.

To add and configure an image: 

1. Click the Inbox page
2. From Components > Graphical, add an Image Component to the canvas.
3. Click on the new Image Component and rename it to: attachmentImage.
4. In the Configuration Panel, set the following:

   Data set	inboxTable
   Data path	Attachment

Step 3: Add and Configure the Button

Next, add a button that App Users can click to reveal the image.

To configure a Button: 

1. From Components > User Interaction, drag the Button Component onto the canvas.
2. Rename the Component to: openAttachmentButton.
3. Configure your new Button with the following:

   Text	Open Attachment

Step 4: Create the Event Handler

Buttons are an interactive element for your interface. In the App Studio, buttons trigger an event. To control the visibility of the attachment, add an Event Handler to the button that updates the openAttachment variable.

You use Event Handlers to take an action when someone clicks a button. Initially, the visibility of the component is false. When the App User clicks the button, the event handler has to set the value to true, so that the interface detects the change, and the image appears.

To add an event handler: 

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

   Handler Name	attachmentEventHandler
   Event type	Click
   Action	Set a variable
   Variable to Set	openAttachment
   Value to Set	true

Step 5: Bind Image Visibility to the Variable

You must use a Mustache expression to reference the openAttachment variable, so that the interface shows the image when the variable evaluates as true. For more information, check Understanding mustaches and expressions.

To configure visibility:

1. Click on the Image Component.
2. Under Appearance > Visible, enter the following:
   

   {{openAttachment}}

Now, the image remains hidden until the App User clicks Open Attachment. This setup demonstrates how to manage visibility using variables and buttons.

Optional: Expand with Full-Screen View

You can extend this exercise, so App Users always see an attachment thumbnail and present the image in full-screen. To implement this enhancement, follow these steps:

1. Add an Event Handler to the thumbnail to update the visibility Variable.
2. Add a Container Component that includes:
   • A full-screen version of the image.
   • A close button that sets the visibility Variable back to false.
3. Set the Container’s visibility to use the Variable.

Styling the Provider Enrollment App

The App Studio removes the need for custom CSS or frontend development knowledge. Instead, it provides a built-in configuration panel to style every aspect of your App, such as Pages or Components.

In this section, you style key Components from earlier in the course. Styling helps improve the user experience and align your App with organizational branding guidelines.

To style the Header: 

1. Click on the Header.
2. In the Appearance Panel, set the Background to #50B9AD.
3. Add a Text Component to the header.
4. Rename the component to: titleTextBox.
5. Configure the following:

   Text	Provider Enrollment Application

6. Change the text to Bold (Click).
7. Change the text to the font color to #FFFFFF.
   

To update the Navigation Component:

1. Click the Navigation Component.
2. Go to Appearance >  Item appearance.
3. Change the text to the font color to #FFFFFF.

To style the inboxTable and providerListTable Components:

1. Select each Table component.
2. Navigate to Appearance > Table headers.
3. Update the following:

To update the Appearance of the searchFormTitle Component:

1. Click the searchFormTitle component.
2. In the Appearance panel, set the following: