One of my favorite features and probably the most useful from a development perspective is the ability to show different objects (or the same object with different sizes) depending on the available space on the screen. Imagine having multiple documents loaded at the same time, one above the other, only the topmost is visible, and they flip when you rotate the screen. The most appropriate document for the screen size is visible, while the others remain in the background. So, we can define a single document with multiple views: for landscape iPad, portrait iPad, smartphone, and so on. MicroStrategy will try to match the space of the device to the closest available view. No need to tilt your head anymore!
We will create a double-view document and see the result on the iPad screen. You should have completed the previous recipes of this chapter to continue.
We start from the home page of our COOKBOOK project:
- Click on Create Document, and select the iPad Landscape document template.
- In design mode, open the Tools menu and click on Document Properties….
- From the left list, choose Page Setup | Page and set both Width and Height values to
1024. - Go to Layout Properties | Mobile, in Supported Orientations select Portrait and Landscape, and then click on OK.
- The canvas is now a 1024 x 1024 square. Open the Tools menu and choose Manage views…, you will see a dialog similar to this screen capture:
The default 1024 x 768 view is listed as Current View.
- Under Actions, click on the Duplicate button to create a new line.
- Rename the new view as
Portrait Viewand change the Resolution to 768x1024, in the Orientation dropdown pick Portrait Only and set previous Original view to Landscape Only. - Uncheck the option Show hidden objects in Design Mode and click on OK.
- Open the Insert menu and select Shape | Rectangle. In the next message box, click on No.
- Now draw a rectangle on the canvas and right-click inside it.
- From the context menu, choose Properties and Formatting….
- Click on Properties | Layout, modify the Position value to
1Left and1Top (pixels). - Set Size Width: Fixed to
1022and Height: Fixed to702. - Next, go to Format | Color and Lines, change the Fill | Color to a light blue.
- In the Line and Shape Settings area, modify Style to Solid, Color to dark blue and click on OK.
- On to the Tools | Manage views window, we now switch to Portrait View by selecting the appropriate radio button under Current View and clicking on OK.
- See that the blue shape disappears; we are now in Portrait View.
- Repeat steps 9 to 15 to insert another shape:
- Left:
1and Top:1 - Width:
766and Height: 958 - Fill | Color: Light Yellow
- Line and Shape Settings | Style: Solid and Color: Orange
- Left:
- When you're done go to interactive mode, see that only the current view is visible; to switch current view you need to go to design mode and open the Tools | Manage views menu.
- Save the document as
40 iPad Landscape Portrait views. - Now bring up the mobile application on the iPad and open the document. Rotate the screen and notice how the different views are shown depending on the screen orientation.
When a document has Supported Orientations set to Portrait and Landscape, if multiple views are available, MicroStrategy app will match the current orientation and resolution to the view that best fits the screen.
You can add grids, graphs, and more to the views and decide if that particular object is always visible or it is shown only in the currently selected view. So, for example, if you have a company logo you can set this to appear in each view by answering Yes to this message:
Add two different grids on the document number 40; one in the Landscape layout and the other in the Portrait one. You can use different attributes, so that you give the user two different perspectives, for example, Sales by Month in one and Sales by Category in the other.
How would you add an image to both views? If the image doesn't fit in Portrait View, how would you resize it?