Step 1. Set Query Condition

In i-AUD Designer, create a query condition Control and set query condition for data.

1.1 Create Control 

1. At the top menu, click UI Bot > Calendar, Label to create a label Control.
   

1.2 Set Properties of Each Control

1. In the Properties Modification panel on the right, set the properties of the Calendar Control as below.
   
   • Name : VS_YM
   • InitDate : Now() or DATE(0,0,0)

   
   
   

   Calendar Property Configuration Guide

   For detailed information about Calendar Property Configuration, please refer to the Link.

   
   

2. Set the property of the Label Control.

   Name	Text
   Label	Reporting Period

   

1.3 Create a Query Button Control

1. At the top menu, go to UI Bot > Button and create a Button Control.
   
   
   
2. In the Properties Modification panel on the right, set the properties as the following.
   
   • • Name : Button
     • Text : Search
     • Background : #ff926c
       
       
   
   
   
3. Verify that the Query Condition Control is placed as below image.
   

Step 2. Connect Chart to OlapGrid

Create and connect a OlapGrid and a Chart to display Sales Performance by Product.

2.1 Set OlapGrid

1. Create a OlapGrid
   
   • Go to UI Bot > Grid > "Olap-Grid"
   
   
   

2. Connect datasource using Sales Analysis META, and activate AutoRefresh.

   

   Connecting OlapGrid DataSource

   Right-click the OlapGrid > DataSource > i-META > Select META file

   • Sales Analysis Location : TBD > Sample > 3.Templates > OLAP > "Sales Analysis"

   AutoRefresh Activation

   Activate AutoRefresh in the property panel on the right of the OlapGrid.

   

   Query Item	Query Condition	Variable
   Column : [Customer Tier] Data : [Sales Cost, Revenue]	[YM]	:VS_YM

   
   
   

3. Right-click to open Design menu, and modify the design property.

   Field	Setting	Other Settings
   [Measures] field position changed : Column > Row	Enable auto selection area Range : Right 5, Down 1	Disable Using Paging

   
   

    Detail Property Configuration

   • [Measures] Field Position Changed : Column > Row
     

   

   
   

   • Enable Auto Selection Area

   

   
   

   • Disable Using Paging

   
   

2.2 Chart Configuration

1. Create a Chart Control
   
   • Go to UI Bot > Chart, and select Chart
   
   
   
   
2. In the property menu on the right, configure the Chart property.
   
   • Olap-Grid : Form1.OlapGrid
   
   
   
   

3. Click the Design menu to modify the design property.
   

   Default	Series	Axis	Legend
   Data Label : Value	[Sales Cost] > Chart Type : Line Chart [Sales Cost] Axis : Y2 [Sales Cost] > Other > Sort Label : TopCenter [Revenue] > Other > Sort Label : BottomCenter	Y1 Axis : Display Disabled X Axis > Design : Major Grid Line width 0	Position : Top, Right Direction : Horizontal

   
   

Verify that the report is working as expected.

Step 3. Set ListGrid

Set a ListGrid to display Detailed Sales Performance.

1. Go to UI Bot > Grid and create a ListGrid.
   
   
   
2. Set properties of the ListGrid.
   
   • Name : DG_DETAIL
   • AutoRefresh : Activate
   
   
   
   

3. Connect data source using Sales Analysis META, and activate AutoRefresh.

   Query Item	Query Condition	Variable
   [Customer Tier, Product Category, Product Subcategory, Sales Quantity, Unit Cost, Unit Price, Revenue]	[YM]	:VS_YM
   	[Customer Tier]	@:VS_LEVEL

   

   Setting Variable Names

   For more information about AUD Platform Variables, please click here.
   
   

   • VS_YM :
     Variable for querying data based on date value of the Calendar Control

   • VS_LEVEL :
     Variable for querying ListGrid value based on [Customer Tier] data.
     Step 5. Utilizing in Script Editor
     
     

4. Click the Design Menu, to modify the design property.

   Setting > Default	Setting > Group
   View Header > Row : Disable	Group : [Customer Tier, Product Category, Product Subcategory] Subtotal Position : Top Grand Total Position : Top

Verify that the report is working as expected.

Step 4. Utilizing Process Bot

Set a module for Chart Design Effect and Report Update.

4.1 Chart Gradient Effect Application Module Setting

1. Click the Process Bot icon at the top.
   
   
   
2. In the Object tab, double-click and place the Report.
   
   
   
3. Load a module that sets the Chart gradient effect, connect with OnDocumentLoadComplete event of the Report,
   and click Number 4 icon for parameter setting.
   
   
   • Module Name : "[Chart] Gradient Effect Application"
   
   
   
4. Set the parameters of the module as below and Click Save button.
   
   • Target Chart for Style Application : Chart
   • Field Value to Apply Condition : [Sales Amount]
   • Gradient Start Color Code : #F9B7A0
   • Gradient End Color Code : #C6A3D8
   
   
   
   

4.2 Refresh for Query Button Module Setting

1. In the Process Bot > Object tab, select and place a Button.
   
   
   
2. In the Activities tab, click system module, Refresh, connect with Button's OnClick event, and set query target parameter.
   
   • Query Target Control List : OlapGrid, DG_DETAIL
   
   
   
   

Step 5. Utilize the Script Editor

5.1 Writing a Variable Initializing Script

1. In the report's top menu, click Edit Group > Script Editor.
   
   
   
2. Search and double-click an API to use.
   
   • API to Use  : OnDocumentLoadComplete
   
   
   
   

3. Write the following script to initialize a variable.
   

    Written Script

   Matrix.SetVariable("VS_LEVEL", "");

5.2 Write a Script to Refresh the DataGrid when a Chart is Clicked

1. Search and double-click an API to use.
   
   
   

2. Write a script for an event when the Chart is clicked.
   

    Written Script

   if(args.Id == "Chart"){
   
   Matrix.SetVariable("VS_LEVEL" ,args.Point);
   Matrix.doRefresh("DG_DETAIL");

   
   }

Verify that the report is working as expected.