Creating a Data Action Button with Scripting

Objectives

After completing this lesson, you will be able to:

  • Create a data action button with scripting

Extending the Button Widget

In the business scenario used in this course, we will take you through extending a data action button for a specific use case. However, there may be other reasons why you want to create a custom button in a story.

Data action buttons can be extended to:

  • Run multiple data actions. Buttons can be extended to run multiple data actions while data action triggers can only run one data action. Extending a data action button means that planners have fewer buttons to push and the data actions always run in the proper sequence.
  • Automatically trigger a data action. Buttons can be extended with dependencies to automatically run a second data action when the first data action runs successfully.
  • Display custom dialogs and popup messages. Buttons can be extended to provide the user with personalized messages and dialogs while data action triggers only display the built-in system dialogs.
  • Select the context of another widget (such as a data table) and automatically apply it to your data action. Buttons can be extended to eliminate the need for a planner to manually provide values in a prompt dialog.

Buttons can be used for more than just data actions. Buttons can also be extended to:

  • Add buttons for design-time settings. For example, if a planner doesn’t have edit access to a story, they can press a button to change a property such as setting a table as read only.
  • Display a list of versions for a data table.
  • Allow easy access to toolbar options such as refresh and revert, making it easier for planners because they no longer need to search for options in the toolbar.

Add Code to a Planning Story Element

There are three ways to add scripting to a story:

  1. Use the autocomplete by selecting CRTL + SPACE and starting to type what you're looking to add.
  2. Type the code directly into the script editor.
  3. Paste the code from a document where you’ve saved it.

Scenario: Create a Data Action Button

Watch this video to learn more about the team's requirement for a data action button that is extended with scripting.

Business Scenario

Your team has created a story that is used by all planners on the team. The story currently has data actions but when they're clicked, planners receive a busy message that says Please wait while the data action is running and an option to run the job in the background. The team doesn’t like the option to Run in Background because the planners would then need to refresh the data manually.

You suggest extending the story with a data action button. Once the team learns about the possibilities available using data action buttons, they decide they want to enhance their planning story.

After working with your colleague Christine to fully understand the business requirement for the extended data action button, you'll create a data action button that:

  1. Has a custom icon
  2. Only appears when there's a private version
  3. Copies and refreshes data
  4. Has a busy indicator without a dialog box while it's running
  5. Tells the planner when it runs successfully

Code Used in the Scenario

In the following example, DataAction_1 has been added to the planning story. It's now possible to enhance it with scripting.

Add Initial Script to the Data Action Button

Using the More Actions button in the story, it’s possible to add an onClick script to the Copy Data button.

The following script is used to run DataAction_1 when the button is clicked to copy and then refresh the data in the table:

Code snippet
DataAction_1.execute();
TBLPLANNING.getDataSource().refreshData();
Expand

Show/Hide Data Action Button

The script below is added to SO_Planning – updateDropdowns to show and hide the Publish as, Delete, and Copy Data buttons when a private version exists:

Code snippet
//if private version exists
if (privVersions.length > 0) {
	// iterate over the private versions
	for (var i=0; i<privVersions.length; i++ ) {
		// add them to the dropdown boxes
		DD_PublishAs_Versions.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
		DD_Delete_Version.addItem(privVersions[i].getId(),privVersions[i].getDisplayId());
		if (selectedPrivateVersion === "" && i === 0) {
			DD_PublishAs_Versions.setSelectedKey(privVersions[i].getId());
			DD_Delete_Version.setSelectedKey(privVersions[i].getId());
		}
	}
	
	BTN_PublishAs.setVisible(true);
	BTN_Delete.setVisible(true);
	BTN_Copy_Data.setVisible(true);
	
	DD_Delete_Version.addItem("ALL","All versions");
	DD_Delete_Version.setSelectedKey("ALL");
	
} else {
	BTN_Delete.setVisible(false);
	BTN_PublishAs.setVisible(false);
	BTN_Copy_Data.setVisible(false);
}
Expand

In the following practice exercise, scripting has already been added to display and hide the Publish as and Delete buttons. You will create a Copy Data button and add the following code phrases to the existing script.

Once a private version is identified in the script, then the following code displays the button: BTN_Copy_Data.setVisible(true);

The following code used to hide the data action button when there's no private version identified in the table:BTN_Copy_Data.setVisible(false);

Add Busy Indicator

The code used to add a busy indicator that will appear when the Copy Data data action button is clicked that will show the user that the data action is running:

Code snippet
Application.showBusyIndicator();
Expand

The code used to hide the busy indicator when the data action is finished running:

Code snippet
Application.hideBusyIndicator();
Expand

Add Custom Message

The code used to display the custom message once the data action runs successfully:

Code snippet
Application.showMessage(ApplicationMessageType.Success,"Data Action ran successfully");
Expand

Create a Data Action Button with Scripting

Task 1: Create a Data Action Button with Scripting to Copy and Refresh Data

What skills will you develop in this practice exercise?

In this practice exercise, you will:

  • Add a data action to the story and configure the parameters
  • Add a Button widget to the story and add a custom icon
  • Add scripting to the button to copy and refresh data

Task 2: Add Scripting to a Data Action Button to Display a Busy Indicator and a Custom Message

What skills will you develop in this practice exercise?

In this practice exercise, you will:

  • Add scripting to the Copy Data data action button to show/hide a busy indicator
  • Add scripting to the Copy Data data action button to add a success message

Log in to track your progress & complete quizzes