Adding Icons to Buttons on the Prompt Page

All Prompts display buttons Run Report and Cancel to take further action on the report. In this scenario, these buttons are customized to display an icon next to the text.

Before customization:

After customization:

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

• Deploying the plug-in provided with MicroStrategy SDK 

• Using the Web Customization Editor to create a plug-in

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. Navigate to Global CSS->Customizations. 

4. Right-click global.css and select New Selector. 

5. Enter .mstrTextButtonExecute in the Selector text field, and click OK. 

6. Double-click .mstrTextButtonExecute to launch the Update CSS Property dialog. 

7. Click Add to launch the New Property dialog. 

8. Enter background in the Property text field and click OK. 

9. Click the Value cell for the background property. 

10. Click the Image button on the Utilities panel to navigate to the image. 

11. Select the image and click OK. The location of the image gets updated in the Value cell. For example: url(images/execute.gif) if the image is called execute.gif. 

12. Click the Value cell for the background property and update the value to transparent url(images/execute.gif) no-repeat center left. 

13. Click Add to launch the New Property dialog. 

14. Enter padding-left in the Property text field and click OK. 

15. Click the Value cell for the padding-left property and enter 15px. 

16. Click OK to exit the Update CSS Property dialog. 

17. Right-click global.css and select New Selector. 

18. Enter .mstrTextButtonCancel in the Selector text field, and click OK. 

19. Double-click .mstrTextButtonCancel to launch the Update CSS Property dialog. 

20. Click Add to launch the New Property dialog. 

21. Enter background in the Property text field and click OK. 

22. Click the Value cell for the background property. 

23. Click the Image button on the Utilities panel to navigate to the image. 

24. Select the image and click OK. The location of the image gets updated in the Value cell. For example: url(images/cancel.gif) if the image is called cancel.gif. 

25. Click the Value cell for the background property and update the value to transparent url(images/cancel.gif) no-repeat center left. 

26. Click Add to launch the New Property dialog. 

27. Enter padding-left in the Property text field and click OK. 

28. Click the Value cell for the padding-left property and enter 15px. 

29. Click OK to exit the Update CSS Property dialog. 

30. Navigate back to MicroStrategy Web Configuration and click on Styles to expand the list of styles used in MicroStrategy Web. 

31. Double-click PromptsContainerStyle_Widget to launch the Style Properties editor in the right frame. 

32. Click the Style Layouts tab. 

33. Click the Edit Layout button. 

34. Click the Yes button in the prompt to edit PromptsContainerLayout_widget.xml. 

35. Add the following lines of code (shown in bold below) to thePromptEditorblock.:

    ...

        ...

        <mstrlayout:block name="PromptEditor">

            ...

            <mstrlayout:bSetProperty path="cancelButton/visible" method="canCancelPrompt"/>

            <mstrlayout:bSetProperty path="messageNameView/visible" method="shouldDisplayRenameMessage"/>

            

            <!-- _CUSTOM_ Give the Execute Button a new css class -->

            <mstrlayout:bSetProperty path="finishButton/cssClass" value="TextButtonExecute"/>

            <!-- _CUSTOM_ Give the Cancel Button a new css class -->

            <mstrlayout:bSetProperty path="cancelButton/cssClass" value="TextButtonCancel" />      

            

            <mstrlayout:slot name="PromptEditor"/>

        </mstrlayout:block>

        ...

    ...

36. Save your changes. 

37. Launch MicroStrategy Web to view the customization.

See Also

• Data Presentation