xP&A CX Commercial Planning - Add an additional story to the Navigation Menu

In order to add a new story to the navigation menu, you must first retrieve the story ID of your new story.

1. Open the story you want to add to the navigation menu.

2. Retrieve the technical story ID.

   • Check the hyperlink. The highlighted part represents the technical story ID. Please note that your story ID might differ.

   

   • In this case, the new story has the ID A99AE05507BABDEB716E3C299797B03.
   • Save the ID somewhere as you will need it later.

Now that you have retrieved the story ID of the story by which you want to extend your navigation menu, you can continue with the actual customization process.

1. Navigate to the folder which contains the composite object for the navigation menu.

   • The composite for the navigation menu is located inside the Commercial Planning folder structure and is called Composite for Commercial Planning Navigation Menu (SAP_CX_XPA_NavMenu).

   

   INFORMATION:

   • A composite is a set of widgets and scripting elements which can be centrally created, maintained and then used across multiple stories.
   • This is especially useful when you have a specific building block, such as a navigation menu, which is identical across all stories.
   • Instead of having to maintain the navigation menu in each of the stories separately, you can instead consume the centrally created composite.
   • All changes done to the composite will then also be automatically reflected in the respective stories which use the composite.

2. Add new UI elements to the Navigation Menu

   • Each of the links or buttons in the navigation menu technically consist of a panel and a text field.
   • In order to create a new item in the menu, open the Left Side Panel, go to the Outline section, select one of the panels under the pnl_mainNav_items container (starting with pnl_mainNav_mnu_itm_xxx) and duplicate it.
   • In this example, we will simply use the pnl_mainNav_itm_GlobalSalesBudget container as a baseline for the new menu item. You can chose any other panel as well since the structure across all of those buttons is identical.

   

3. Rename the new elements

   • You can now see the new elements in the Outline section in the Left Side Panel.

   

   • After duplicating existing elements, the new elements are provided with a generic name.
   • Adjust the names of the panel and the text field according to the naming convention.

   INFORMATION:

   You can also skip this step and continue with the default names, but it highly advised to adjust the names for maintenance and consistency reasons.

   • In this demonstration, we will rename the panel Panel_1 to pnl_mainNav_itm_TestStory and the text field from Text_1 to txt_mainNav_itm_TestStory.

   

4. Adjust the display name of the new menu item.

   • Double click on the text widget on the canvas and adjust the text which should be displayed in runtime.

   

5. Rearrange the new elements by changing the positioning

   • If required, you can now rearrange the positioning of the new elements in the menu.
   • Please note that all panels inside the pnl_mainNav_items container have a fixed positioning. If you want to move the new elements to the top, you will consequently have to change the positioning of the following panels as well in order to avoid overlapping.

   

6. Open the initializeNavMenu script of the composite.

   • Open the Left Side Panel
   • Go to Outline
   • Open the initializeNavMenu script of the composite.

   

7. Extend the cfg_storyIds_pageIndex dictionary.

   • In the initializeNavMenu script, scroll down until you see the block where the variable cfg_storyIds_pageIndex is initialized.
   • Add a new line for the new story according to the format you see. You may add this new line wherever you want, the order does not matter.
   • For the so called key, provide any semantic name for your story. In this case, the story names were used but you can provide any name of your choice. In this demonstration, we will call it TestStory.
   • For the so called value, provide the story ID of your new story as string that you retrieved in Step 1 of this tutorial. In this case, the ID is A99AE05507BABDEB716E3C299797B03.
   • Your result should look like this now:

   

8. Add a new line of code to apply the correct CSS class to the duplicated text object.

   • Scroll down a little bit until you find the code block indicated by the comment format Nav Menu items texts
   • Add a new line of code here. Enter the name of the text element you have defined in sub-step 3 and append .setCssClass(itemsTextsCssClass); to it.
   • The result should look like this, with the new line visible in line 58:

   

9. Add a new line of code to apply the correct CSS class to the duplicated panel object.

   • Scroll down a little bit until you find the code block indicated by the comment format Nav Menu items panels
   • Add a new line of code here. Enter the name of the panel object you have defined in sub-step 3 and append .setCssClass(itemsPanelsCssClass); to it.
   • The result should look like this, with the new line visible in line 78:

   

10. Extend the switch function at the end of the script.

    • Scroll to the last part of the script where you will find a switch function containing many cases.
    • Extend the switch function by an additional case as shown in the following screenshot:

    

11. Update the onClick event script of the duplicated text element.

    • Open the Outline section.
    • Find the duplicated text object. In this case, we have to look for the object called txt_mainNav_itm_TestStory.
    • Open the onClick event script.
    • Edit the code by changing the highlighted part to the key name you provided in sub-step 6.

    

12. Save your changes.

    • Your changes should now be reflected in all of the stories which consume this composite.

Congratulations! You have finished the tutorial and are now able to extend the navigation menu.

If you want to learn more about the modules of this content package, check out the following tutorials:

• xP&A Commercial Planning - Get to know the Sales Planning module
• xP&A Commercial Planning - Get to know the Portfolio Planning module
• xP&A Commercial Planning - Get to know the Marketing Planning module

If you want to customize the content and adjust it according to your own business requirements, the following resources might be helpful:

• xP&A Commercial Planning - Introduction to the Data Model
• xP&A Commercial Planning - Data Integration
• xP&A Commercial Planning - Manage data loads
• xP&A Commercial Planning - Understanding the technical structure of Stories
• xP&A Commercial Planning - Add additional sections to a story
• xP&A Commercial Planning - Customize Default Settings
• xP&A Commercial Planning - Customize Table Settings Dialogue
• xP&A Commercial Planning (Marketing) - Add a new Driver
• xP&A Commercial Planning (Marketing) - Add a new Version
• xP&A Commercial Planning (Marketing) - Extend activity spend dates
• xP&A Commercial Planning (Sales) - Add a new Version
• xP&A Commercial Planning (Sales) - Add a new Tactic
• xP&A Commercial Planning (Sales) - Add a new Spend Type

If you want to get an overview of the entire xP&A Commercial Planning content package, make sure to check out the Mission.

Interested in more xP&A topics and related business content packages? Visit our community page Extended Planning & Analysis Business Content.