Skip to Content
Technical Articles
Author's profile photo Rohit Chouhan (Deloitte)

Passing input control value to data action using JavaScript in Sap Analytics Cloud

Image%20Source%3A%20alphaservesp.com

Image Source: alphaservesp.com

Welcome to our tutorial blog on how to utilize input controls in SAP Analytics Cloud (SAC) to enhance data actions. SAC empowers users to gain valuable insights from data through interactive visualizations and intelligent analytics. By integrating input controls and data actions, we can create more dynamic and user-driven analytics experiences. In this blog, we’ll walk you through the process of passing input control values to data actions using JavaScript, leading to better data analysis and exploration. This method is supported in Stories and Analytic Application

Step 1: Set Up Data Action Script Object

First, we need to create a data action script object to handle the interaction between input controls and data actions. Follow these steps to set up the script object:

In your SAP Analytics Cloud dashboard, navigate to the “Stories” view.
Click on the “Data Actions” button (three dots icon) in the toolbar and select “Create Data Action Script Object.”

Name your script object appropriately, providing a clear description of its purpose.
Choose the relevant dataset or model for the script object to apply.
Configure the desired behavior of the data action, such as adding filters or replacing data.

Step 2: Add an Input Control for the Dimension

Next, we’ll create an input control for the dimension we want to pass to the data action. For example, let’s assume we want to filter data based on a date dimension.

In the “Stories” view, click on the “Insert” tab in the toolbar.
Select the “Input Control” option, and then choose the appropriate input control type (e.g., “Date” for our example).

Configure the input control settings to match your dataset and dimension requirements.
Place the input control on your dashboard where users can interact with it.

Step 3: Create a Button and Insert the JavaScript Code

We’ll create a button on the dashboard, and when users interact with the input control and click the button, the selected value will be passed to the data action. Here’s the JavaScript code to achieve this:

Syntax:-

var filter_values = ArrayUtils.create(Type.string);
var input_control = <input_control_name>.getInputControlDataSource().getActiveSelectedMembers();
if(input_control.length>1){
	for(var i = 0 ; i < input_control.length; i ++){
		 filter_values.push(input_control[i].id);
	}
} else {
	filter_values = input_control[0].id;
}
<Data_Action_Object_Name>.setParameterValue("<Data_Action_Parameter_Id>", filter_values);
<Data_Action_Object_Name>.execute();

Please replace <input_control_name> with the name of your input control and <Data_Action_Object_Name> with the name of the data action script object you created in Step 1. Also, adjust the <Data_Action_Parameter_Id> to match the parameter ID in your data action.

Example:-

var filter_values = ArrayUtils.create(Type.string);
var input_control = date_input.getInputControlDataSource().getActiveSelectedMembers();
if(input_control.length>1){
	for(var i = 0 ; i < input_control.length; i ++){
		 filter_values.push(input_control[i].id);
	}
} else {
	filter_values = input_control[0].id;
}

DataAction_1.setParameterValue("Date", filter_values);
DataAction_1.execute();

 

Step 4: Test the Interaction

Save your changes and navigate to the “Stories” or “Analytics Application” view to test the interaction. Now, when you select date values in the input control and click the button, the JavaScript code will trigger the data action. The data action will then use the selected date values as parameters and perform the defined action, such as filtering the dataset based on those dates.

Conclusion

By integrating input controls and data actions using JavaScript in SAP Analytics Cloud, you can empower users to interactively explore data and gain more valuable insights. The combination of input controls and data actions provides a powerful toolset to create dynamic, user-driven analytics experiences. Experiment with different input controls and data actions to enhance your SAC dashboards and elevate your data analysis to new heights. Happy analyzing!

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Luis Parra
      Luis Parra

      Hello Rohit,

      very interesting your blog. Do you know if in optimized stories, I can somehow execute a data action using JavaScript code?

       

      Thank you.

      Author's profile photo Rohit Chouhan (Deloitte)
      Rohit Chouhan (Deloitte)
      Blog Post Author

      Hy Luis,

      You can follow this same method for Optimized Stories and Analytic Apps. It's supported in both.

      Author's profile photo Thayumanavan Swamynathan
      Thayumanavan Swamynathan

      Hi   @rohitchouhan,

      ​I am facing the below warning message when I changed the dropdown value "Your data selection has too many values. Auto limit has been applied to your chart to display the values in the order you set. use filters to reduce the number of displayed values".

      Can you Please kindly help me to sort out this issue.

      scenario is I have two input filter and dropdown

      Input Controls are below

      1. Customer Region : has the following members  ACT,NQ,NSW,NT,QLD,SA,TAS,VIC,WA

      2. Business Region : has the following members AUNSW,AUNT,AUQLD,AUSA,AUVIC,AUWA,NZ_LOCAL,#(unassigned)

      DropDown 

      image.png

      I have written the sac script when user click on JH States it should show Business Region input control and at the same time it create a color  dimension. Same scenario if the user click on customer region

      Please find the script which I have used it on dropdown - Onclick

      if(Dropdown_5.getSelectedKey() === 'JHStates')

      {

      InputControl_9.setVisible(true);

       

      InputControl_6.setVisible(false);
      ​                Chart_18.removeDimension("ZCPFREGN",Feed.Color); ZCPFREGN - Customer Region

                      Chart_18.addDimension("ZSDH2",Feed.Color);      ZSDH2 - JH Sates

      }

      if(Dropdown_5.getSelectedKey() === 'CustomerRegion' )

      {

      InputControl_6.setVisible(true);

       

      InputControl_9.setVisible(false);

      Chart_18.removeDimension("ZSDH2",Feed.Color);

       

      Chart_18.addDimension("ZCPFREGN",Feed.Color);

      }

      Once I change the dropdown data is displaying for only 1 year with the below warning

      "Your data selection has too many values. Auto limit has been applied to your chart to display the values in the order you set. use filters to reduce the number of displayed values".

      Thanks,
      ​Thayu

      Author's profile photo Thayumanavan Swamynathan
      Thayumanavan Swamynathan

      Hi @Rohit Chouhan

      Is there any way to remove and add input control using script

      I am facing the below warning message when I changed the dropdown value "Your data selection has too many values. Auto limit has been applied to your chart to display the values in the order you set. use filters to reduce the number of displayed values".

      Can you Please kindly help me to sort out this issue.

      scenario is I have two input filter and dropdown

      Input Controls are below

      1. Customer Region : has the following members ACT,NQ,NSW,NT,QLD,SA,TAS,VIC,WA

      2. Business Region : has the following members AUNSW,AUNT,AUQLD,AUSA,AUVIC,AUWA,NZ_LOCAL,#(unassigned)

      DropDown

      image.png

      I have written the sac script when user click on JH States it should show Business Region input control and at the same time it create a color dimension. Same scenario if the user click on customer region

      Please find the script which I have used it on dropdown - Onclick

      if(Dropdown_5.getSelectedKey() === 'JHStates')

      {

      InputControl_9.setVisible(true);

      InputControl_6.setVisible(false);
      Chart_18.removeDimension("ZCPFREGN",Feed.Color); ZCPFREGN - Customer Region

      Chart_18.addDimension("ZSDH2",Feed.Color); ZSDH2 - JH Sates

      }

      if(Dropdown_5.getSelectedKey() === 'CustomerRegion' )

      {

      InputControl_6.setVisible(true);

      InputControl_9.setVisible(false);

      Chart_18.removeDimension("ZSDH2",Feed.Color);

      Chart_18.addDimension("ZCPFREGN",Feed.Color);

      }

      Once I change the dropdown data is displaying for only 1 year with the below warning

      "Your data selection has too many values. Auto limit has been applied to your chart to display the values in the order you set. use filters to reduce the number of displayed values".

      Thanks,
      Thayu

      Author's profile photo Thayumanavan Swamynathan
      Thayumanavan Swamynathan

      Hi ,

      Is there any way to  remove input control using script

      eg, I have two input control

      1. customer Region
      2. Business Region

      and  dropdown with 2 values

      1.  A,
      2.  B

      if I click on A Business Region input control should remove at the same time if i click on B Business Input control should add

      if I click on B Customer Region Input control should remove at the same time if i click on A Customer region should add

      Can you Please help me I am struggling with this part , set visible (false) is not matching for my requirement.

      Thanks,
      Thayu.

      Author's profile photo Hadar Kuint
      Hadar Kuint

      Hi,

      I'm getting an error for type mismatch: Cannot convert from "string" to "Array of string" in line 11.

      my input control is a simple two ranges date, for current month and last month. (text show "Aug, 2023" and "Jul, 2023")

      how can I see the Id's of the ranges? or how can I amend the script to toggle between last/current month