After completing this lesson, you will be able to:
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:
Use the autocomplete by selecting CRTL + SPACE and starting to type what you're looking to add.
Type the code directly into the script editor.
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:
Has a custom icon
Only appears when there's a private version
Copies and refreshes data
Has a busy indicator without a dialog box while it's running
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:
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);
}
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: