MicroStrategy ONE

Modifying the Page By Buttons

This scenario deals with modifying the buttons on the Page By panel. These buttons allow you to perform operations such as dragging and dropping report objects to rows, columns or page by fields, or removing them from the report, and so on. The approach for modifying these buttons involves modifying a CSS file.

In this example, the images that are used for rendering the buttons on a Page By panel are updated. The default page by buttons (pivotLeft.gif, pivotRight.gif, pivotToRows.gif, pivotToCols.gif, and remove.gif) displayed on the Page By panel are located in the style/mstr/images of the application. As shown in the diagrams below, different buttons are used.

Before customization:

After customization:

This customization can be accomplished using either of the following methods:

Deploying the plug-in provided with MicroStrategy SDK

MicroStrategy SDK provides a plug-in (ZIP file) that can simply be extracted to thepluginsfolder to view the customization in MicroStrategy Web. The following steps guide you in locating the plug-in and deploying it. 

  1. Access the plug-in: JSP version or ASP .NET version. 

  2. Extract the plug-in to the plugins subfolder inside the MicroStrategy Web installation folder.   

  3. Launch MicroStrategy Web to view the customization.

Using the Web Customization Editor to create a plug-in

MicroStrategy SDK provides a Web Customization Editor that can be used to create a customization plug-in. The following steps guide you in creating the plug-in and deploying it. 

  1. Launch the Web Customization Editor. 

  2. Click on MicroStrategy Web Configuration inside the Application Settings view to expand the hierarchical tree. The expanded list comprises the different settings that can be modified to perform customizations. 

  3. Click on Pages to expand the list of pages used in MicroStrategy Web. 

  4. Click on report (Report Execution) to expand the child nodes under it. 

  5. Double-click on CSS to expand the child nodes under it. 

  6. Click on MicroStrategy Web to expand the child nodes under it. 

  7. Click on mstr to expand the list of CSS files used on the Welcome page. 

  8. Click on mstr.css to expand the rules defined within this CSS file. 

  9. Click on .pivotLeft to expand the properties defined for this rule. 

  10. Double-click on background-image to launch the Update CSS Property dialog. 

  11. Click on Utils >> to view the Utilities panel. 

  12. Click the Image button on the Utilities panel to navigate to the image for the new button. 

  13. Select the image and click OK. The location of the image gets added in the Value text field. 

  14. Click OK. This new background-image property gets added under the .pivotLeft rule inside a newly created CSS file "reportPage.css" under report (Report Execution)->CSS->Customizations. 

  15. Click on .pivotRemove (under report (Report Execution)->CSS->MicroStrategy Web->mstr->mstr.css) to expand the properties defined for this rule. 

  16. Double-click on background-image to launch the Update CSS Property dialog. 

  17. Click on Utils >> to view the Utilities panel. 

  18. Click the Image button on the Utilities panel to navigate to the image for the new button. 

  19. Select the image and click OK. The location of the image gets added in the Value text field. 

  20. Click OK. This new background-image property gets added under the .pivotRemove rule inside the previously created CSS file "reportPage.css" under report (Report Execution)->CSS->Customizations. 

  21. Click on .pivotRight (under report (Report Execution)->CSS->MicroStrategy Web->mstr->mstr.css) to expand the properties defined for this rule. 

  22. Double-click on background-image to launch the Update CSS Property dialog. 

  23. Click on Utils >> to view the Utilities panel. 

  24. Click the Image button on the Utilities panel to navigate to the image for the new button. 

  25. Select the image and click OK. The location of the image gets added in the Value text field. 

  26. Click OK. This new background-image property gets added under the .pivotRight rule inside the previously created CSS file "reportPage.css" under report (Report Execution)->CSS->Customizations. 

  27. Click on .pivotToCols (under report (Report Execution)->CSS->MicroStrategy Web->mstr->mstr.css) to expand the properties defined for this rule. 

  28. Double-click on background-image to launch the Update CSS Property dialog. 

  29. Click on Utils >> to view the Utilities panel. 

  30. Click the Image button on the Utilities panel to navigate to the image for the new button. 

  31. Select the image and click OK. The location of the image gets added in the Value text field. 

  32. Click OK. This new background-image property gets added under the .pivotToCols rule inside the previously created CSS file "reportPage.css" under report (Report Execution)->CSS->Customizations. 

  33. Click on .pivotToRows (under report (Report Execution)->CSS->MicroStrategy Web->mstr->mstr.css) to expand the properties defined for this rule. 

  34. Double-click on background-image to launch the Update CSS Property dialog. 

  35. Click on Utils >> to view the Utilities panel. 

  36. Click the Image button on the Utilities panel to navigate to the image for the new button. 

  37. Select the image and click OK. The location of the image gets added in the Value text field. 

  38. Click OK. This new background-image property gets added under the .pivotToRows rule inside the previously created CSS file "reportPage.css" under report (Report Execution)->CSS->Customizations. 

  39. Launch MicroStrategy Web to view the customization.

See Also