Displaying images: Image Viewer widget

You can use the Image Viewer widget to display images and image description in a document on an iPhone, iPad, or Android device with MicroStrategy Mobile. Users can zoom in and out of the images.

For iPhone and iPad, you can choose to display the images in a slide show, filmstrip, or matrix layout, specify the captions to display for each image, format the background and border color of the widget, and so on.

You can define:

• An Information Window that displays when an image is tapped. For instructions on creating an Information Window, see Providing additional information to users: Information Windows.

• A link in the widget to open a report or another document.

Prerequisites

You must create an attribute to place on the widget's Grid/Graph, with the following attribute forms:

• The first attribute form contains the location in which each image is saved.

• The second attribute form contains a description of each image.

• The third attribute form contains the unique numeric ID of each image.

To add an Image Viewer widget to a document

1. Open the document in Design or Editable Mode.

2. From the Insert menu, point to Widgets, then point to Mobile, and select Image Viewer.

3. Click the location on your document where you want to place the widget. The Grid/Graph containing the widget is displayed.

4. Optionally, resize the widget by clicking and then dragging its handles.

5. From the Dataset Objects panel on the left, select attributes and metrics, and drag them on to the Grid/Graph, as described in the prerequisites above.

To choose the attribute forms displayed for an attribute in the widget, right-click the header of the attribute, point to Attribute Forms, then select the attribute forms to display.

Configure the widget's display properties

1. Right-click the widget, then select Properties and Formatting. The Properties and Formatting dialog box opens.

2. From the left, select Widget.

3. Click the Widget Properties icon. The Image Viewer Properties dialog box opens.

4. From the Display Style drop-down list, select the display style to use to show images in the widget, as follows:

• To display the images in an interactive slideshow, select Slideshow (default). Users can switch between images by performing a horizontal swipe motion on the mobile device.

• To display the images in a filmstrip layout, select Filmstrip. Users can scroll through images vertically or horizontally, as determined by the Scroll Direction option described below.

• To display the images in a table layout, with evenly spaced rows and columns, select Matrix. You can specify the number of rows and columns displayed in the table using the Number of Rows and Number of Columns options described below.

5. You can determine whether to display images in the widget in a vertical or horizontal layout. This option is only available if the Display Style option is set to Filmstrip. From the Scroll Direction drop-down list, select one of the following:

• To display images in a vertical layout, select Vertical (default). Users can perform a vertical swipe motion on the mobile device to scroll through the images.

• To display images in a horizontal layout, select Horizontal. Users can perform a horizontal swipe motion on the mobile device to scroll through the images.

6. You can determine how many rows of images are displayed in the widget. In the Number of Rows field, type the number of rows to display. This option is only available if the Display Style option is set to Matrix.

7. You can determine how many columns of images are displayed in the widget. In the Number of Columns field, type the number of columns to display. This option is only available if the Display Style option is set to Matrix.

8. From the First Caption Line drop-down list, select the attribute form that contains the first line of captions you want to display for images in the widget.

9. From the Second Caption Line drop-down list, select the attribute form that contains the second line of captions you want to display for images in the widget.

10. You can specify the default action (such as drilling on an attribute or opening a report or document) to perform when the user taps an image caption in the widget. From the Default Action Form drop-down list, select an attribute form. The action defined for this attribute form will automatically be performed when the user taps the caption.

11. From the Background Color palette, select the background color of the widget by doing one of the following:

• To display a transparent background color, click No Fill.

• To display a solid background color, select the background color from the palette. You can access additional colors by clicking More Colors.

12. From the Border Color palette, select the color of the border to display around the images in the widget by doing one of the following:

• To display the borders as transparent, click No Fill.

• To display a solid border color, select the border color from the palette. You can access additional colors by clicking More Colors.

13. From the Border Width drop-down list, select the thickness of the border to display around the images. The default value is 5 pixels.

14. Click OK to return to the Properties and Formatting dialog box.

15. Click OK to save the changes.