MicroStrategy ONE

Displaying the list of projects in a tabbed display

This scenario shows how to customize the default Home page to display available projects as tabs at the top of the Home page.

Before customization:

After customization:

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

Using the plug-in provided for you

The MicroStrategy SDK provides an out-of-the-box plug-in (ZIP file) that changes the images used for rendering the pivot buttons on a report. Follow the simple steps below to deploy the plug-in and view the results in MicroStrategy Web.

  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. Restart your web server.

  4. Launch MicroStrategy Web to view the customization.

Creating the plug-in yourself using the Web Customization Editor

If you want to understand how to display available projects as tabs at the top of the Home page, follow the steps below to create the plug-in and deploy it.

  1. Launch the Web Customization Editor.

    Because you create a custom transform in this scenario, make sure that Build Automatically is selected from the Projects menu in Eclipse.

  2. Create a new plug-in and give it a meaningful name.

    1. On the Application Settings tab, click the Select Plug-in icon.:


    2. On the Select Plug-in dialog box, click New and enter a meaningful name for the plug-in, such as DisplayingProjectsTabbedDisplay.

    3. Click OK.

  3. Create a custom layout class, ProjectsToolbarSampleLayout.xml. :

    1. ProjectsToolbarSampleLayout.xml, which contains the code for this layout, is included in the plug-in provided by MicroStrategy SDK.

    2. Download this file and save it in the plugins\pluginName\WEB-INF\xml\layouts subfolder inside the MicroStrategy Web installation folder.

  4. On the Application Settings tab in the Web Customization Editor, expand MicroStrategy Web Configuration to view the list of settings that can be modified to perform customizations.:

    • Right-click Styles and select Create Transform to launch the Transform Creation Wizard:

      1. On the first panel::

        1. For Source folder, click Browse. Navigate to thesrc folder in your MicroStrategy project, select it, and click OK.  

        2. For Package, enter com.microstrategy.sdk.samples.transforms.

        3. For Name, enter ProjectsToolbarSampleTransform.

        4. For Transform description, enter This transform displays the list of projects as a tabbed display.

        5. For Superclass, enter com.microstrategy.web.app.transforms.ProjectsTransform.

        6. Click Next.

      2. On the second panel:

        1. Confirm that Uncheck all methods is selected.

        2. Click Next.

      3. On the final panel::

        1. Click Finish. ProjectsToolbarSampleTransform.java opens in the editor.

        2. A sample file, ProjectsToolbarSampleTransform.java, with the entire code for this custom transform has been provided for you. Download this file, copy its entire contents and paste them in ProjectsToolbarSampleTransform.java that is open for editing.

      4. Save your changes.

    • Right-click Styles and select New Style to launch the Style Creation Wizard.

      1. On the first panel:

        1. For Style Name, enter ProjectsToolbarStyle.

        2. For Description, enter Style: Display list of projects as a tabbed display.

        3. For Transform Defn, select ProjectsToolbarSampleTransform

        4. Click Next.

      2. On the second panel::

        1. Select transform parameter displayFlag and click >> to move it to the shopping cart.

        2. Click Next.

      3. On the third panel:

        1. With displayFlag selected, enter 15 for Value.

        2. Click Next.

      4. On the fourth panel::

        1. For Layout Definition, click ... to navigate to ProjectsToolbarSampleLayout.xml in the plugins\pluginName\WEB-INF\xml\layouts subfolder. Select ProjectsToolbarSampleLayout.xml and click Open.

        2. Click Next

      5. On the final panel, click Finish.

    • Expand Pages to view the list of pages used in MicroStrategy Web.:

      • Double-click the desktop (Desktop) page to display the Properties Editor.:

        1. Click the Template Properties tab at the bottom of the editor to make changes to the default page template.

        2. Right-click the path page section and select Edit current file.

        3. Click Yes to make a copy of Basic_Path.jsp/ascx in your plug-in and open it for editing.

        4. In the copy of Basic_Path.jsp/ascx, replace the code shown in bold italics below.

          J2EE environment:

          Before customization

          Copy 
           ...
           <%-- Display the path section --%>
              <div class="mstrPathContainer">
                 <web:displayBean bean="pathBean" styleName="DesktopPathStyle"/>
                 <%@include file='/jsp/Logo.jsp' %>
              </div>
           ...

          After customization

          Copy 
           ...
           <%-- Display the path section --%>
              <div class="mstrPathContainer">
                 <web:displayBean bean="projects" styleName="ProjectsToolbarStyle"/>
                 <%@include file='/jsp/Logo.jsp' %>
              </div>
           ... 
           

          .NET environment:

          Before customization

          Copy 
           ...
           <%-- Display the path section --%>
              <div class="mstrPathContainer">
                 <web:displayBean runat="server" bean="pathBean" styleName="DesktopPathStyle"/>
                 <%@include file='/jsp/Logo.jsp' %>
              </div>
           ...

          After customization

          Copy 
           ...
           <%-- Display the path section --%>
              <div class="mstrPathContainer">
                 <web:displayBean runat="server" bean="projects" styleName="ProjectsToolbarStyle"/>
                 <%@include file='/jsp/Logo.jsp' %>
              </div>
           ... 

        5. Save your changes.  

    • Expand desktop (Desktop), right-click Beans and select New Bean to launch the New Web Bean Wizard.:

      1. On the first panel::

        1. For Name, enter projects.

        2. For System Bean, click .. to browse to and select ProjectsBean.

        3. For Persist Mode, confirm that None is selected.

        4. Click Next.

      2. On the second panel, click Next. Do not select any features.

      3. On the third panel::

        1. Confirm that No is selected, to specify that a custom event handler is not used for this bean.

        2. Click Next.

      4. On the fourth panel, click Next. Do not select any initialization parameters.

      5. On the fifth panel, click Next. Do not select any request parameters.

      6. On the final panel, click Finish.

    • With desktop (Desktop) expanded, expand CSS, then MicroStrategy Web, then mstr.:

      • Right-click pageDesktop.css and choose New Selector.

        1. Enter .mstrPathContainer .mstrTransform as the name of the selector.
        2. For Apply Selector to, confirm that This Page is selected.
        3. Click OK. A new CSS file, called desktopPage.css, is created under CSS -> Customizations, with the new .mstrPathContainer .mstrTransform selector you just added. 

      • Right-click the new .mstrPathContainer .mstrTransform selector and choose New Property.

        1. For Property, enter line-height.

        2. For Value, enter 32px.

        3. For Apply to, confirm that This Page is selected.

        4. Click OK. The new property is added.

  5. A new plug-in folder, with the name you gave it, now exists in the plugins folder of your MicroStrategy Web installation directory. Restart your web server to apply the plug-in.
  6. Launch MicroStrategy Web, select a project, and view the customizations.

See Also