TABLE 

TABLE OF CONTENTS

• Leveraging Data Sets
  • Understanding when to use Data Sets
    • Importing a prepared App 
    • Preparing a Custom View for the sample App
  • Configuring and updating Data Tables
    • Configuring a View for a Data Table
  • Retrieving and presenting data
    • Displaying data fields in Components
• Integrating external applications
  • Adding search functionality
  • Evaluating Data Sets automatically
    • Chaining Data Set evaluation
    • Applying business decisions using Rulesets
    • Evaluating Ruleset Data Sets
• Enhancing the capabilities to your App
  • Learning about App navigation
  • Writing records to a Data Set
  • Handling App User events
  • Handling Button Events
• Styling the Provider Enrollment App

Leveraging Data Sets

Understanding when to use Data Sets

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

To learn how to use Data Sets we’re going to use the example from the US medical system which is responsible for controlling, tracking and monitoring medical service providers (like pharmacists, doctors and hospitals). Each of these providers must be enrolled into the system to provide service. Provider enrollment is a very complex operation that includes multiple processes, sometimes over a long duration. Provider enrollment is the process where healthcare providers apply to be enrolled in a health insurance network. Provider enrollment peaks at certain times of the year, when new professionals complete their academic training for example.

For the purposes of this article, you are going to create an App that an agent can use to process a provider’s emails, then check the provider’s current status and submit new enrollment information to the health insurance network, all from a single screen. This use case has been greatly simplified to highlight the conceptual operations within the App Studio. 

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 

For this section some resources have already been prepared for you to make use of.   You can import an App definition file to save time sharing the configurations for your App. Later the article covers what you export from an App. For this section you import definitions to access external web API endpoints.

You will need to download both training resources appstudiotrainingv3.zip and base64attachment.txt to help perform  these following walkthroughs. 

Important: Do not unzip the appstudiotrainingv3.zip file.

To Import an App: 

1. On the CafeX home screen, click Create a new App.
2. Click Import from a file.
3. Import the appstudiotraining.zip file.
4. Click Open.
5. Add a new App with the following parameters:

   Name	Provider Enrollment - [INSERT NAME]

6. Click Add.
7. CafeX takes you to your newly created App.
8. Under Workspaces, Click Create a Workspace 
9. Create a Workspace with the following parameters:

   Name	Provider Enrollment

10. Click Create Now.

Important: Going forward, the articles refers to this workspace as: your Provider Enrollment Workspace.  At times, the article directs you to return to this workspace.

This time, you create a Workspace to provide context for your Provider Enrollment App before you begin to build the Custom View for your App. Any changes that you make to your Views or App configurations automatically apply to the Workspaces that exist. So modifications to your Custom View, even the one you have not made yet, apply to this Workspace.

Preparing a Custom View for the sample App

In order to configure our interface, using App Studio, you have to create a Custom View, like you did previously. For more information, see: Creating a Custom View.

To create a Custom View:

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

   View name	Provider Enrollment Email App
   View type	Custom

4. Go to Configure > App Studio.
5. Click Page 1.
6. On the Appearance and Configuration panel, rename the page to Inbox.
   
7. Go to Explorer > App.

Configuring and updating Data Tables

In this section we will show you how to define a table schema for a table in your Workspace that you can use to temporarily store enrollment emails in. Each row of the table represents an email that someone can process. A CafeX Data Table is a set of records, associated with your Workspace, where you can store private data. In this case, the CafeX Data Table is one that you configure to mimic an email inbox. The fields of tables can store complex data objects. For example, fields can reference Users, CafeX Workspaces, and files. 

In all likelihood, the inbox would be retrieved using a workflow that is integrated with a dedicated mailbox or with a workforce management system that is already setup to retrieve such emails. For the purposes of this article, you will use a simple schema to act as the email inbox, so that you do not have to become familiar with the Workflow engine at this point. Each row of the table represents an email and each Workspace has its own inbox. 

To configure a Data Table schema:

1. From App Studio, use the navigation bar to click Data Tables.
   
2. Click Add new table.
3. Create a Data Table with the following parameters:

   Table Name

   Inbox

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

In order to add data to your Inbox Data Table, you need to create a Grid View, to interact with the Data Tables of a Workspace. For more information about Views, see: Using the App Overview.

In this section, you add mock emails to the Inbox Data Table, in the instance of the table in your Provider Enrollment Workspace. Each Workspace has its own single instance of the table, so you have to modify the new table in this Workspace.

Currently, there are no rows in your table. For the purposes of this article, you add mock data to simulate two emails. 

To create a Grid View:

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

   View Name	Inbox
   View Type	Grid
   Data source	Inbox

To Add a rows to a table:

1. Go to your Provider EnrollmentWorkspace. 
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.
5. Enter Data for each field. For example:

   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	06/08/2023

6. Click Add a record.
7. Repeat steps 4 – 6 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. Although this process is artificial, you gain an understanding of one way that a Workspace can hold data objects relevant to the session that your App uses. In this example, you only use a single table, in more advanced Apps you can create several tables that cross-reference each other.

Retrieving and presenting data

Data Sets are the way that an App interface interacts with data. For an App Builder, Data Sets provide you with a consistent way of interacting with different types of data. When you build your interface in the App Studio, you wire interface Components to Data Sets without having to know whether it is a local Data Table, or an external web API behind it, for example. You simply have to reference the Data Set you wish to use. You configure a Data Set with what it needs to retrieve data from, or write data to, a specific source. The following shows the different types of Data Sets:

See also: Using data in your App

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

5. Click Add.

In your interface, you use Table Components to display data as rows and columns and typically use them when you have to display more than one record, or portions of records, at the same time. Table Components are useful when you need to perform searches, or compare records. For the purposes of this article, you use a Table Component to act as an inbox, it has to display information about the emails.

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

To configure a Table Component: 

1. Click Components on the Explorer and Component Panel.
2. Under Data, add the Table Component to your canvas.
   
3. Click on the new Table Component.
4. Rename the Component to inboxTable.
   

   
   Important: As before, use consistent naming for your Components. While you build your App you start to reference Components, which saves you time and reduces errors. During the article, it is important to name the components exactly as written to help to debug any issues you encounter.
     

5. Under configuration for your table, configure the following:

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

You set this table to read-only because, currently, you only want to display records and prevent App Users from editing data.

When you select your Data Set, you see there are other Data Sets to choose from. Those are system Data Sets that are available to you, that include information such as, the current user, the current workspace, and details about the tenant. You do not use these additional Data Sets in this article. 

After you add the Data Set to your Table Component configuration, you see that the columns automatically appear from the schema of the Table Component. As an App Builder, you do not need to manually map data fields to interface fields, the App Studio does this for you, for all Data sets. If you want to hide any of the columns from the Interface, go to: Configuration > Fields and toggle the Visibility of the fields that you want to hide.

Important: In the App Studio, the data you see in tables and forms are not the data from your data sets. This is intentional, and provides you, as an App Builder, a way to verify functionality without having to execute any back-end data directly. The App Studio creates artificial values for Data set fields. This can be very important, if your App handles sensitive information, so that it does not appear when you design or build the interface. 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 article, you prepare Components to make the body of the email easier to read.   The App Studio manages a lot of the interactions for you here. All you need to do is create a new Text Component and associate it with the correct Data Set. When a user clicks a row of the inbox Table Component to open an email, CafeX evaluates the row and the email body displays in the Text Component. If the user clicks another row, the changes propagate to the same Text Component.

To reference a Component: 

1. On the Explorer and Component Panel, click Components.
2. Under Graphical, add a Text Component to your canvas.
3. Click on the text Component.
4. Rename the Component to emailBodyText.
5. Click your new Text Component add the following:
   

   {{inboxTable.0.Body}}

Important: When you add a Table Component, the CafeX App Studio automatically creates a Data Set for the interface for you to use that represents the current state of the Table.  The Text Component references the table, not the inbox, To reference the Table Component, you use a mustache. Data Sets are like tables, this means the Data set can hold multiple records. When you reference the Table Component in this way, you reference the selected rows. So this means inboxTable, selected row 0, and then the Body of that row. 

You now have a text Component that displays the body of the email when a user clicks a table row. Exit the App Studio and from the App Overview Screen go back to your Provider Enrollment workspace to interact with your interface. 

To exit the App Studio and go back to the App Overview Screen, click:

Integrating external applications

At this point you should be familiar with CafeX App Studio, the necessity of a Workspace, and how Data Sets formalize the interactions with data. In this article, you make use of a web API that provides JSON in its response. Your CafeX App calls out to external systems so that your App can make use of other applications. In addition, because CafeX manages the external APIs for you, you do not have to write code to authenticate, maintain, and establish the connection.

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 web API that this training provides, is a very simple RESTful API that you can use to retrieve information about Providers. The intention is that your App User searches for Provider information so that they can complete the tasks that the email contains.

You use the following endpoints in the article:

You do not have to configure the External Data Sources for this article.  You are able to review the configuration that the Enrollment Provider App requires.

To review the External Data Source configuration: 

1. Go to Configure > External data sources.
2. Select any of the External Data Sources.
3. Click Edit data source ().
4. Under Configuration, is a JSON definition for the endpoint that your App uses to access the API.
5. Under Schema, there is a JSON definition of information your App uses.

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

In order to perform search, you have to collect parameters and use them to evaluate a Data Set for an External Data Source. This gives your users the ability to search for a provider and present relevant information back to your users. You configure a search form so that an agent can find providers. Form Components allow you to submit parameters on a Data Set. When values are set, or changes, CafeX evaluates the Data Set and provides the App with new records. In a similar way to the Table Component, Form Components use the Data Set definition to know which fields to present to users. As an App Builder, you can adjust which fields are visible, for example, to provide different search options for users.

To provide search functionality you need:

• Add a Data Set to search on.
• Add a Form Component to let users enter fields to search on.
• Set the DataSet to evaluate with those fields.
• Add a Table Component to display the result of the search.

To add a Data Set to search on:

1. Go to Explorer > App.
2. On 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 ignore the Data Set parameters in these steps, they are not necessary here, and you configure these later on in the training. 

5. Click Add at the bottom.

To add a search form: 

1. First add a Text Component as a title for your Form:
   1. Under Graphical, select the Component to add to your canvas.
   2. Add the Text Component to your canvas.
   3. Rename the Component to searchFormTitle.
   4. Set the TEXT field, add: Provider Search.
2. Add a Form Component to your View: 
   1. Click Components on the Explorer and Component Panel.
   2. Under Data, Add the Form Component to your View.
      
   3. Click on the new Form Component.
   4. In the Configuration Panel, rename the Component to providerSearchForm.
3. Under configuration for your table, configure the following:

   Search Form	ON (Toggle to green)
   Data set	searchProviders

   
   

Forms either present Data Set results (as read-only), or can set parameters that a Data Set uses to evaluate and submit that data to the Data Set.  In this example, you want your App Users to input an NPI, or a Provider Name, and click Search. Search submits the values of the fields to the searchProviders Data Set and then CafeX evaluates it. In this case, the evaluation results in a search that calls out to the API with the parameters and it returns the array of providers.

To ensure the Data Set knows which fields to use, because it could evaluate from multiple locations, you have to configure your providerSearch Data Set to use the fields from the providerSearchForm.

 To set Data Set parameters: 

1. Go to your searchProviders Data Set
2. Set the NPI and Provider name parameters to:

   NPI	providerSearchForm > NPI

    

   

3. Toggle NPI to Required.

The parameters you configure here tell CafeX when to evaluate the Data Set.  In this case, 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, then the Data Set evaluates when the page first loads.

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

To add a results table:

1. In App Studio, on the Explorer and Component Panel, Click Components.
2. Under Data, add a Table Component to your canvas.
3. Name your new Table Component: providerSearchResultsTable.
4. Under Configuration for your table, set the following:

   Read only	ON (Toggle to Green)
   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. 

This is all you have to do to allow App Users to search an external endpoint. Although the API for this article is very simple,  the process is the same for more complex data retrieval. By specifying a single Data Set, CafeX can construct the schema for your interface, so that it can add inputs and outputs to forms and tables automatically.  In addition, CafeX manages when to invoke those endpoints and maps interface fields to API fields for you.

Go back to your Provider Enrollment Workspace to try out the search.

The API returns artificial data for the search. So you can search for any NPI and it returns 2 records.

Each search result has an MCD value that you can use to look up more information on the provider location.

Evaluating Data Sets automatically

In this section, you add a second external data source so that your App Users can retrieve more information about a provider. Typically, searches only return enough information for users to select the correct record, and then applications perform read operations to retrieve a full record. The API to search for Providers only returns the name of the Provider, clearly your users need more than this. Your App requires a second Data Set to retrieve the provider record.

You need to complete the following:

• Add a new Data Set that evaluates when a user clicks a row from the table of results.
• Add a Form to view the entire record.

To add the new Data Set:

1. Go to Explorer > App.
2. On 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 takes the MCD field output of the providerSearchResultsTable so that this Data Set evaluates.
6. Set MCD to Required.

To configure a read-only Form: 

1. On the Explorer and Component Panel, click Components.
2. Under Data, add the Form Component to your canvas.
3. Click on the new Form Component.
4. Rename the Component to additionalProviderForm.
5. Under Configurationfor your Form Component:

   Read only	ON (Toggle to green)
   Data Set	additionalProviderInformation

You now have an App with a search, and read record capability.

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

You saw in the last section that it is possible for you to take the outputs of one Data Set and use them as the input for another Data Set evaluation without the need to write any code to handle the parameters. In this example, the second Data Set evaluates when you select a row from the result Table. However, it is possible to make CafeX evaluate a Data Set without user input. You can chain data set evaluation together. This may be necessary in Apps that use APIs that do not return all of the necessary information on a single request. It also means you can write Apps that make queries and have results for users before they need it. For example, if you know that your users typically make a second request, and it takes a long time for that to load, you can set up your Data Sets to evaluate using the information from the first request.

Chaining Data Set evaluation means you are automatically using the output from one Data Set to trigger another Data Set to evaluate. This is an important feature of the App Studio because you can cause several Data Sets to evaluate in parallel, or sequentially, without user interaction, to dynamically update what is happening on the screen. 

You now have a read only form that displays additional provider information based on the output of another Data Set. Go back to your Provider Enrollment workspace to interact with what you have created.

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 does not require development cycles to update, so enables business users to manage the rules. 

You configure the following to define a Ruleset:

• Input Facts (the inputs)
• Result Facts (the outputs)
• Conditional Rules

In this section, you add a Ruleset that takes the days remaining on a license and makes a business decision to alert the user if there are fewer than 5 days remaining.

To access Rulesets: 

1. Go to Configure > Rulesets.
2. You already have a Ruleset to use in this part of the training. 
3. Open Days Remaining Alert
     

This Ruleset shows an error message when the days remaining on a provider's license is less than 5. 

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 the Test Ruleset to check the results of inputs that you provide to check that it is working correctly. 

Just like previously, 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 the license value is available from the additionalProviderInformation Data Set, and returns a true  The warning message displays if the value is less than 5.

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 if the Ruleset determines it is necessary.

1. On the Inbox Page, add a Text Component to your canvas.
2. Rename the Component to licenseWarningText.
3. Add the following Mustache evaluation to your Text Component:
   

   {{daysRemainingDataSet.0.errorMessage}}

The Text Component references the Data Set and displays the errorMessage that the Ruleset defines. In App Studio, you see no warning message; this is because the condition for the Ruleset has not been met. 

Enhancing the capabilities to your App

Learning about App navigation

App Studio allows you to create additional pages for your interface. Multiple pages allows you smooth accessibility of all the functions and Components in your interface. For this part of the training, you add an additional page that acts as a page that the agent can submit a provider’s enrollment.

To add the submit function you need to complete the following steps:

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

To add an additional page: 

1. On the Explorer and Components panel Explorer > App.
2. Right-click on the App to bring up a context menu:
3. Click Add Page.
   
4. Click Page 2 under App.
5. In the configuration panel, rename the page to: ProviderEnrollment.

As an App Builder, you use the Navigation Component to display links to Pages of your App automatically. It manages the Pages of your App so that you do not have to create menu items to navigate. The App Users need to have two pages; one to read their email and perform a search, and a second to submit a form to manage the provider’s enrollment. It’s common for web applications to use a header that does not change between pages. So your App also needs a header where you can add the navigation component.

To add a Navigation Component:

1. On the canvas, Click Add Header.
2. Click Components on the Explorer and Component Panel.
3. Under User Interaction, add the NAVIGATION Component to your App header.
   
4. Click on the new Navigation Component.
   The Navigation Component automatically keeps track of all the Pages in your App, or you can set them manually.
5. In the Configuration Panel, rename the Component to pageNavigation.

Writing records to a Data Set

In this section, you add another external Data Set so that your App Users can submit an enrollment form on behalf of the Provider. To do this, you add a Data Set that calls an external data source that uses the HTTP POST operation.  

1. Go to Explorer > App.
2. Under 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.

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

To configure an enrollment form: 

1. Click ProviderEnrollment Page.
2. Click Components on the Explorer and Component Panel.
3. Under Data, add the Form Component to your canvas.
4. Rename the Component to enrollmentForm.
5. Under configuration for your table, configure the following: 

   Data set

   enrollProvider

    

   

The steps that you take are very similar to the steps you follow to add a Form to read records; however, this time you see that the Data Set fields are available for you to set.  You can update the Fields if necessary. 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. 

To submit the data to the API endpoint, you have to update the enrollProvider Data Set to point to the fields on the form.

Handling App User events

In this section, you add a Text Component under your enrollment Form, so that the App User can receive a notification after they submit an enrollment for a provider.   You only want to show this message to someone after they submit the form. To do this, you create a Variable to store the visibility of the Component. You add a Variable Data Set to your App and use an Event Handler to set the visibility of the confirmation message.

To add the confirmation message:

1. Click 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

To add a visibility Variable Data Set:

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

   Name	showEnrollmentSubmitted
   Type	Variable
   Expression	false

You set the expression of the variable to false, so that you change the variable to true after the user submits a provider enrollment. 

You now configure the Event Handler to trigger after the user submits an enrollment that changes the value of the Variable.

An event handler enables you to set an event type and assign an action to take; for example: After someone clicks a Button, set a variable. As an App Builder, you make use of Event Handler to perform operations that happen because of user interaction. 

To add an Event Handler:

1. Click ProviderEnrollment Page, if necessary.
2. Click on your Form Component.
3. Go to: Configuration > Event handlers.
4. Click Add handler.
5. 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

Each Component has a Visible property. It controls when a component is visible on the interface. You use a Mustache to assign the value of a Variable to a Component’s Visible property.

In this section, you reference the showEnrollmentSubmitted Variable to hide a Text Component until the Variable evaluates as true.

To configure visibility:

1. Click on enrollmentNotificationText Text component.
2. On the Appearance and Configuration panel, click Appearance.
3. For Visible enter the following:
   

   {{showEnrollmentSubmitted}}

Now, the component becomes visible when the showEnrollmentSubmitted Variables is true. The Event Handler, enrollmentEventHandler, sets Variable as true after someone submits an enrollment form.  

Handling Button Events

In this section, you add a button to display an email attachment. Often providers attach their license documents to their emails. Although you can make the attachment appear without requiring a button, this section serves to understand the Button Component and the corresponding event handling.

To do this you need to complete the following steps:

• Add a Variable Data Set to show or hide the attachment.
• Add an Image Component to display the attachment.
• Add a Button to click that updates the Variable.

To add a Variable:

1. Under App > Configuration > Add Data Set. Add a new Data Set with the following parameters:

   Name	openAttachment
   Type	Variable
   Expression	false

Buttons are an interactive element for your interface. In the App Studio, buttons trigger an event. 

Add an image to your canvas to display the license attachment of an email. The attachment field of the Inbox Data Table contains an encoding of an image in base64.  The CafeX Image Component also supports URLs and images that you upload; in this case you use a base64 data url as the format to display the image.

To configure an image: 

1. Click Inbox page
2. On the Explorer and Component Panel, under Components  > Graphical, add an Image Component to your canvas.
3. Click on the new Image Component.
4. Rename the Component to: attachmentImage.
5. Configure the following:

   DATA SET	inboxTable
   DATA PATH	Attachment

To configure a Button: 

1. On the Explorer and Component Panel, under Components > User Interaction. Add a Button Component to your canvas.
2. Rename the Component to: openAttachmentButton.
3. Configure your new Button with the following:

   TEXT	Open Attachment

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, the image appears.

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	attachmentEventHandler
   Event type	Click
   Action	Set a variable
   Variable to Set	openAttachment
   Value to Set	true

You have to use a Mustache to reference the openAttachment. Variable so that the interface shows the image when the variable evaluates as true. For more information, see: Using Variables.

To configure visibility:

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

   {{openAttachment}}

Now, after the App first loads, if the App User clicks an email they do not see the attachment until they click Open Attachment. 

You can extend this exercise so App Users always see an attachment thumbnail and present the image in full-screen. On your own perform the following instructions:

1. Add an Event Handler to the thumbnail to update the visibility Variable.
2. Add a Container Component that includes:
   • A full screen 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 eliminates the need for you to understand CSS styling and front end development. You can adjust the appearance of every aspect of your App, such as Pages or Components using the App Studio. 

In this section, you style the Components from earlier in the course. Typically, you style the interface for several reasons, including to create a great user experience and to apply familiar branding Apps.  

To style the header: 

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

   TEXT	Provider Enrollment Application

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

To update the Navigation Component:

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

Update the Appearance of the inboxTable and providerListTable Components with the following:

Update the Appearance of the searchFormTitle component with the following: