MicroStrategy ONE

Modifying the Look and Feel of a Report Grid

This scenario customizes the default report style in the Style Catalog Configuration file so it displays a report with a customized look and feel. This is useful in cases where you want to apply your custom look and feel (style) to MicroStrategy reports.

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 CSS inside the CSS Settings view to expand the hierarchical tree. The expanded list comprises the different settings that can be modified to perform customizations. 

  3. Navigate to MicroStrategy Web Styles->style. 

  4. Right-click ReportTransformGridColorful.css and select Copy CSS File. A copy called ReportTransformGridColorful.css is created under CSS->Customized Web Styles->style. 

  5. Click on this copy of ReportTransformGridColorful.css to expand the rules defined for this CSS file.:

    The names of the rules generally reference the element on the report to which the style is applied. For example, the r-metricValue rule refers to metric values in the grid. The r-subtotalValue rule refers to subtotal values listed in the column.
     

  6. Click r-metricValue to expand the properties defined for this CSS rule. 

  7. Double-click the BACKGROUND-COLOR property to customize it. 

  8. Enter gainsboro as the new value for this property. 

  9. Select the radio button Apply to this File. 

  10. Click OK. 

  11. Perform steps 7 - 10 for the following CSS rules: r-metricValue-odd, r-subtotalValue-odd, r-rowHeader, r-rowHeader-odd and r-rowHeader-total-odd. 

  12. Click r-metricValue-even to expand the properties defined for this CSS rule. 

  13. Double-click the BACKGROUND-COLOR property to customize it. 

  14. Enter mintcream as the new value for this property. 

  15. Select the radio button Apply to this File. 

  16. Click OK. 

  17. Perform steps 13 - 16 for the following CSS rules: r-subtotalValue, r-subtotalValue-even, r-rowHeader-even, r-rowHeader-total and r-rowHeader-total-even. 

  18. Click r-colHeader to expand the properties defined for this CSS rule. 

  19. Double-click the BACKGROUND-COLOR property to customize it. 

  20. Enter lightsteelblue as the new value for this property. 

  21. Select the radio button Apply to this File. 

  22. Click OK. 

  23. Perform steps 19 - 22 for the following CSS rules: r-colHeader-total, r-colTitle, and r-rowTitle. 

  24. Click r-colHeader to expand the properties defined for this CSS rule. 

  25. Double-click the BORDER-LEFT property to customize it. 

  26. Enter #848284 3pt double as the new value for this property. 

  27. Select the radio button Apply to this File. 

  28. Click OK. 

  29. Right-click r-colHeader and select New Property. 

  30. Enter FONT-STYLE and italic in the Property and Value fields respectively. 

  31. Select the radio button Apply to this File. 

  32. Click OK. 

  33. 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. 

  34. Click on Styles to expand the list of styles used in MicroStrategy Web. 

  35. Right-click ReportGridStyleColorful and select Duplicate. 

  36. Right-click CopyOfReportGridStyleColorful style and select Rename. 

  37. Enter CustomReportGridStyleColorful in the Name text field, and click OK. 

  38. Click the Style Parameters tab. 

  39. Select parameter cssFile and change the value in the Value text field to ../plugins/PluginName/style/ReportTransformGridColorful.css. 

  40. Save your changes. 

  41. Double-click ReportFrameLayoutStyle (under the Styles node). 

  42. Click the Style Layouts tab at the bottom in the right frame. 

  43. Click the Edit Layout button. 

  44. Click the Yes button in the prompt to edit ReportFrameLayout.xml. 

  45. Replace the occurrence of ReportGridStyle in ReportFrameLayout.xml to CustomReportGridStyleColorful. 

  46. Save your changes. 

  47. Launch MicroStrategy Web to view the customization.

See Also