(Example) Configure the Chart Form Control

Result

This example shows how to configure the Chart form control in the Finance Manager Approval form to show a chart of how much a customer spends on the items. The data in this chart is retrieved from a Microsoft Excel file with an Auto-Lookup form control.

Prerequisites

• This example topic uses the lookup created in the (Example) Configure an Auto-Lookup Form Control with Microsoft Excel. Refer to that topic for more information about configuring the lookup.

  The lookup name is Sales Invoice Items.

• This example uses the Microsoft Excel file created in (Example) Create a Microsoft Excel File to Use as a Data Source for an App. Refer to that topic for information about configuring the Excel file.

  The Microsoft Excel file name is Sales Invoice Items.xlsx.

• This example uses the Sales Invoice app from the AgilePoint NX App Store.

  For more information, refer to How to Get the App

  ​

Good to Know

• The Sales Invoice app creates an invoice for a product sale.

  For the use case in this example, the Finance Manager Approval form shows a chart of how much a customer spends on the items.

• In this example, an app designer configures the Chart form control with the Sales Invoice Items lookup that was used on the Sales Invoice Request form in the Invoice Items field to populate the data from a Microsoft Excel file.

  For more information, refer to:

  • (Example) Configure an Auto-Lookup Form Control with Microsoft Excel
  • (Example) Create a Microsoft Excel File to Use as a Data Source for an App

How to Start

1. Click App Builder.

   
   
   

2. On the Application Explorer screen, click Sales Invoice > Processes > Sales Invoice > Forms > Task Forms > Finance Manager Approval.

   
   
   

3. On the Finance Manager Approval form, in the Tool Box, open the Telerik Controls tab.

   
   
   

4. On the Telerik Controls tab, drag the Chart form control onto your eForm.

   
   
   

Procedure

1. On the Finance Manager Approval form, put your cursor over the Chart form control, and the form control toolbar shows.

   
   
   

2. Click Edit Properties .

   
   
   

3. On the Field Settings - Chart screen, in the Label field, enter Invoice Items.

   
   
   

4. Click the Configure tab.

   
   
   

5. On the Configure tab, in the Minimum Value field, enter 500.

   This is an example value. The value you enter in this field should make the chart show the data that is the most relevant for a runtime app user. This depends on the data the Chart form control is likely to show based on your business requirements.

   
   
   

6. In the Maximum Value field, enter 12000.

   This is an example value. The value you enter in this field should make the chart show the data that is the most relevant for a runtime app user. This depends on the data the Chart form control is likely to show based on your business requirements

   
   
   

7. In the Series Defaults field, select Column.

   
   
   

8. In the List Type field, select Lookup List.

   
   
   

9. Click Configure Chart DataSource .

   
   
   

10. On the Configure Data Source screen, in the Lookup Source field, select Sales Invoice Items.

    In this example, the lookup name is Sales Invoice Items. For information about how to create the Sales Invoice Items lookup, refer to (Example) Configure an Auto-Lookup Form Control with Microsoft Excel

    
    
    

11. In the Category Column field, select Product.

    
    
    

12. In the Series Column field, select Total Price.

    
    
    

13. Click Ok.

    The Field Settings - Chart screen shows.

    
    
    

14. To save the changes, click Close Screen .
15. On the Finance Manager Approval form, expand the Chart form control to the width to show on the eForm.

    
    
    

Next, save, check in, and publish the process-based app.

For more information, refer to (Example) Save, Check In, and Publish a Process-Based App.

Next, run the app.

For more information, refer to My Apps screen (Modern)

Prerequisites

• AgilePoint NX OnDemand (public cloud), or AgilePoint NX Private Cloud or AgilePoint NX OnPremises v7.0 or higher.

Good to Know

• This procedure is optional. It is provided so you can test the example with an out-of-the-box app.
• This is part of the Background and Setup procedures, but many users preferred this step to appear after the example, not before it.

Procedure

1. Click App Store .

   
   
   

2. In the CATEGORY section, click Sales.

   
   
   

3. Click the Sales Invoice app.

   
   
   

4. On the Sales Invoice screen, click Add.

   
   
   

5. On the Trust App screen, click Trust it.
6. Click Return to site.