DESIGN MOBILE APPS FOR ANDROID DEVICES

DESIGN MOBILE APPS FOR ANDROID DEVICES

Thank you for participating in a workshop at

MicroStrategy World 2019. If you missed or did

not finish an exercise and want to complete it

after the conference, use this workbook and

access the supporting files at

microstrategy.com/world-2019-workshops

*Workshop files will expire 4/30/2019

4 | MicroStrategy

Designing Mobile Apps for Android Devices

Introduction 4 © 2019 MicroStrategy, Inc.

Introduction With MicroStrategy Mobile, you can deploy best-in-class native mobile apps so sophisticated analytics can go wherever employees do. Equip people to make better decisions on the fly with touch-optimized reports and dashboards that put critical information at their fingertips. With MicroStrategy, you can build custom apps tailored to any business function or role—and kickstart digital transformation at your organization.

Sample Android Apps with MicroStrategy Mobile

MicroStrategy | 5

MicroStrategy World 2019 Workshop BookDesigning Mobile Apps Android

5 Workshop software setup © 2019 MicroStrategy, Inc.

In this workshop, we will be building a revenue analysis app for Android devices. You will need an Android device such as a phone or a tablet, and a computer. You’ll also need to download the MicroStrategy Mobile and MicroStrategy Library applications to your Android device.

If you did not bring an Android device or a laptop with you, if your device permissions prohibit you from downloading software, or you are otherwise unable to complete the necessary software installations, find a neighbor and form teams for the remainder of the workshop.

Workshop software setup 1 Download MicroStrategy Mobile for Android app from the Google Play

Store on your Android phone/tablet.

2 Once the app has finished downloading, open the Chrome browser and type the configuration link below that matches the device type you are using:

• Android Tablet: http://tinyurl.com/y9r5olqh

• Android Phone: http://tinyurl.com/y78wkrpa

3 If you are prompted to pick which app you would like to open the link in, choose MicroStrategy. The MicroStrategy Mobile app will open.

MicroStrategy Mobile provides a one-step solution to configuring an app via the configuration link. You can create different configuration links for individual users or user groups. Users can also manually configure their app instead of using the configuration link.

Launch MicroStrategy Web

1 Use the following link to access MicroStrategy Web (the link is case-sensitive): https://env-XXXXXX.customer.cloud.microstrategy.com/MicroStrategy/ servlet/mstrWeb

XXXXXX represents the environment number provided to you by your instructor.

2 On the login screen that appears, enter the following credentials and click

Login:

• Username: androidworkshop

• Password: androidworkshop

6 | MicroStrategy

Designing Mobile Apps for Android DevicesDesigning Mobile Apps Android

13 Exercise 1: Update the revenue analysis page © 2019 MicroStrategy, Inc.

Create user folder

1 After logging in, click the Android Workshop project.

2 Click the Shared Reports folder.

3 Click the Mobile Android Workshop folder.

4 Right click the 1. Workshop Template folder and select Copy.

5 In the Copy Folder window, navigate to the 3. User Folders folder.

MicroStrategy | 7



6 Click the New Folder icon . Name the new folder with your name in the following format: Last Name, First Name (for example, “Smith, John”).

7 Click OK to create the folder.

8 In the Copy Folder window, type My Mobile Application in the Name box.

9 Click OK to copy the Workshop Template folder to the new folder.

10 Return to the home screen. Click the 3. User Folders folder.

11 Click the folder you created to open the folder. Note that other users will be

8 | MicroStrategy



creating similar folders, so you will need to navigate to the folder you created with your name.

Getting started You are an analyst for an organization that is moving towards becoming an Intelligent Enterprise. Enterprise mobility is a key facet in an Intelligent Enterprise, so your organization is starting to integrate mobile analytics into their business model. Last week, the executive team was given a preliminary look at the application you developed and they decided to move forward with the project.

However, they also want to provide the application to regional directors and managers. Originally, the proof of concept (POC) application was developed specifically for the executive team, who are all provided tablets by the organization. Other users will access the application through their personal smartphones.

Your task is to update the existing POC application to address this new requirement, then test the resulting application on both a tablet and a smartphone to ensure that it functions as desired on all device types.

Exercise 1: Update the revenue analysis page The application you’re building consists of two pages: Revenue Analysis and Regional Analysis. Each of these pages was originally designed to be utilized on a tablet and now these pages must work on both tablets and smartphones. You can achieve this with Mobile Views, which allow for the creation of multiple display styles on a single document.

1 Click the My Mobile Application folder to open it. Inside the folder are two

documents:

• Revenue Analysis

• Regional Analysis

2 Right click the 2. Revenue Analysis document and click Edit.

The Revenue Analysis document will open in Design Mode.

Before we make any changes, let’s take a quick look at the current version of the app.

MicroStrategy | 9



The Revenue Analysis page lists three primary KPIs across the top of the screen. Directly below the KPIs is a grid with more detailed information, where users can filter by Region using a link bar selector. At the bottom of the page, you and your team created a link bar for app navigation.

This document was built for tablets held in landscape orientation. A separate view of this page has been created for smartphones, but no actual changes have been made to the objects yet. Let’s navigate to the portrait view.

3 From the Tools menu, select Manage Views.

10 | MicroStrategy



4 In the Manage Views window, you can see the two views that have been created: one for tablets and one for smartphones. Switch to the Android Phone view by selecting it as the current view, then click OK. The Smartphone view of the Revenue Analysis page opens.

When a document with multiple views is launched from a mobile device, the device automatically detects which view best fits its screen. If you would like to modify the resolution settings in this menu to better fit your device(s), you can, but it is not necessary for this workshop. The Smartphone view contains all of the same objects as the Tablet view, but they’re restructured to fit a phone held in portrait orientation. Views allow app designers to optimize the overall user experience regardless of the device.

Configure the multiple views function

Utilizing the multiple views function, you can hide objects in one view while leaving them unchanged in the other view. Let’s hide the selector from the smartphone view.

1 Beneath the three KPIs, at the top of the document, click the Region Selector

object, as shown below.

MicroStrategy | 11



2 Right click the Region selector, then click Delete.

3 A warning message appears, indicating that this object exists in multiple document views. Select No.

This option box appears when deleting an object from a document with multiple views. Clicking Yes will delete the object from all the views, while clicking No only deletes the object from the current view. This allows app designers to independently maintain objects across a document with multiple views.

4 Run the current view in Editable mode by clicking the Editable mode icon to confirm that the selector no longer appears.

As you can see above, the selector no longer appears in this document view.

In Editable Mode, various elements of the document populate with data. You can continue to modify the sizing, placement, and format of objects after they’ve been executed.

5 Return to the Design View by clicking the Design View icon .

12 | MicroStrategy



6 From the Document Home menu, click Save.

7 To return to Tablet view, from the Tools menu, click Manage Views.

8 Select Android Tablet as the current view and click OK.

The Tablet View reopens. We will make two more updates to this document before moving on to the Regional Analysis page.

Create a heat map widget

1 You want to change the grid to a heat map to show customer satisfaction by

year. Right click the existing grid object and select Properties and Formatting.

2 In the Properties and Formatting window, select Widget in the list of

categories on the left. Currently, no widget is selected, so the grid will display when the document is run.

MicroStrategy | 13

MicroStrategy World 2019 Workshop BookAndroid DesigningMobileApps

Exercise 1: Update the revenue analysis page 14 © 2019 MicroStrategy, Inc.

3 In the Widget drop-down list, point to Mobile, then select Heat Map.

Widgets commonly serve as alternate ways to display data on a document outside of a typical grid or graph. Additionally, some widgets are specifically designed for mobile devices, as well as for use with other MicroStrategy platform functionalities like Transaction Services.

By default, the Heat Map widget is enabled for iPad, Android Tablet, and DHTML. This means that tablet users see a Heat Map, but smart phone users continue to see the grid instead.

Widgets can be specifically enabled for certain device types through this menu; this is another way of modifying the user experience based on device type.

14 | MicroStrategy



4 Click OK to close the Properties and Formatting Window with your changes applied.

Add a link to the Regional Analysis page

1 If it is not already shown, click the Document Structure tab, located on the

bottom left to show a list of all the objects on the current document.

2 Within the Body section of the document, right click Region Link and select Edit Links.

3 In the Links window, you can configure an action to occur when the image is

clicked. For this app, we want to launch the Regional Analysis document. Under When this link is clicked, select Run this report or document.

4 Click the ellipses (…) button to select the document to run.

5 Navigate to Mobile Android Workshop > 3. User Folders > [Your User Folder] > My Mobile Application and select the 2. Regional Analysis document.

6 Click OK. Click OK again to close the Links window. Now, when run, tapping

on the Regional Analysis button will open the Regional Analysis document.

MicroStrategy | 15


17 Exercise 2: Update the regional analysis page © 2019 MicroStrategy, Inc.

7 Click Document Home on the menu bar to open the Document Home toolbar.

8 From the toolbar, set the document size to Fit Width.

9 The Revenue Analysis document update is complete. Save your document.

10 Return to the My Mobile Application folder by clicking the link in the folder path at the top of the screen.

Exercise 2: Update the regional analysis page 1 From the My Mobile Application folder, hover over the 2. Regional Analysis

document and select Edit. The Regional Analysis document opens in Design Mode.

2 We want to edit the tablet view. From the Tools menu, select Manage Views.

Ensure that the Current View is set to Android Tablet. Click OK.

The Regional Analysis page currently contains a Map widget and an empty panel stack. Because of the limited screen space of a phone, you’ve decided to make the map full-screen. However, we still need the panel stack to be accessible. To make the panel stack viewable, we will configure the panel stack to function as an information window.

16 | MicroStrategy



Information windows are additional layers of data that can appear when users

interact with certain objects, such as tapping a grid. For our app, a line chart that displays Revenue by Year will display when a location on the map is selected.

To start, we need to place content inside our panel stack.

Add content to the panel stack

1 Click Add Content in the empty panel stack, point to Graph, then select

Vertical Line.

2 Select Yes in the confirmation window so that the line chart appears in all document views. A line chart is now displayed inside the panel stack. The graph zones highlight where you can add dataset objects to the chart.

Designing Mobile Apps Android







Vertical Line.









Vertical Line.


MicroStrategy | 17


29 Congratulations © 2019 MicroStrategy, Inc.

3 Select Dataset Objects in the menu on the bottom left window to display the objects that you can add to the line chart.

4 From the Dataset Objects panel, drag the Year attribute to the Categories drop zone of the line chart. Drag the Revenue metric to the Metrics drop zone. Your chart should look like the image below:

5 Close the Graph Zones view by clicking the Graph Zones icon .

18 | MicroStrategy



6 Right click the line chart and select Properties and Formatting. In the

Properties and Formatting window, in General properties, clear the Show Title Bar check box.

7 Click OK to save your changes.

8 Click the Editable Mode icon to format the graph.

9 Right click the line chart and select Format.

10 In the Format window, select Format in the list of properties on the left.

11 From the All Text dropdown list, select Legend.

12 From the Position dropdown list, select Bottom to place the legend at the bottom of the graph.

13 Click Number on the left.

14 From the Targets dropdown list, select Y Axis Values.

15 Click Currency and set Decimal Places to 0.

MicroStrategy | 19



16 Click OK to save your changes.

17 Return to Design Mode. Save your work.

Now that the panel stack contains a line chart, we want to enable the panel stack as an information window to pop up over the map widget.

Configure information window

1 Click the Document Structure tab on the bottom left of the window.

2 Expand Body in the Document Structure panel.

3 Right click Panel Stack and select Properties and Formatting.

20 | MicroStrategy



4 In the Properties and Formatting window, in the General properties, select the Use as Information Window check box. Click OK. You’ve enabled the panel stack to be an information window and it will be hidden from view when the document is run.

Next, you will add the information window to the Map. Add information window to the map

5 Click the map widget, which is displayed as a grid because we are in Design

View.

MicroStrategy | 21



6 Right click the column header for the City attribute, and select Use as

Selector.

7 In the Configure Selector window, a list of available targets is displayed. Move Panel Stack to the Selected Targets list.

8 At the bottom of the Configure Selector window, select Panel Stack from the Panel Stack dropdown list.Your Configure Selector window should resemble the image below:

22 | MicroStrategy



9 Click Create to enable the information window. Now that the panel stack is an information window, it is hidden from view. This means currently half the tablet view will appear empty when the document is launched.

10 Expand the map widget horizontally so it covers the entirety of the Regional

Analysis document. Now, the map will appear full screen. The information window will open when a city on the map is selected.

11 Save your work.

Configure revenue link for navigation

1 In the Document Structure panel, right click Revenue Link and select Edit

Links.

2 Configure the link to launch the 1. Revenue Analysis document, located in Mobile Android Workshop > 3. User Folders > [Your User Folder] > My Mobile Application.

MicroStrategy | 23



3 Click OK.

4 From the menu, select Document Home.

5 In the toolbar, set the document size to Fit Width.

6 Save the Regional Analysis document.

We’re now ready to deploy our app to our mobile devices.

Note that if you do not have both a tablet and a phone with you today, a tablet can simulate the phone view by switching orientation from portrait *

24 | MicroStrategy



to landscape.

Exercise 3: Deploy the app to your device(s) 1 Open the MicroStrategy Mobile app on the device you previously configured

to the Mobile Server.

2 Navigate to the user folder you created at the beginning of the workshop.

3 From your user folder, navigate to the My Mobile Application folder, and

open the 1. Revenue Analysis document. This document will launch on your app.

From here, you can explore the functionality that we added to each of these documents. On the Revenue Analysis page, the Regional selector only appears if you are on a tablet and viewing the document in landscape view. Similarly, you

will only see the Heat Map widget on a tablet; on a smart phone the heat map renders as a grid.

MicroStrategy | 25



On the Regional Analysis page, you can trigger the information window to open by tapping points on the map widget. The dimensions of the map will match the device you use. You can navigate between the two documents using the button bar at the bottom of the screen.

The two view modes in this workshop are designed for 16x9 screens in the portrait view and 16x10 screens in the landscape view. Depending on the exact dimensions of your device, there may be some scrolling required to view the entirety of each view.

26 | MicroStrategy

Designing Mobile Apps for Android Devices



Conclusion You have completed the Design Mobile Apps for Android Devices workshop! Over the course of this workshop you have:

• Configured your Android device to access the MicroStrategy Mobile app.

• Enabled Mobile Views on your documents for use on both Android tablets and smartphones.

• Created objects to be viewed in Portrait View and others when in Landscape View.

• Created a heat map widget.

• Created an information window.

For more information on Enterprise Mobility, MicroStrategy offers the 11.121 Overview of Enterprise Mobility course.

For resources and certifications with MicroStrategy Education, visit: https:// www.microstrategy.com/us/services/education/.

*

MicroStrategy | 27

MicroStrategy World 2019 Workshop Book

1850 Towers Crescent Plaza | Tysons Corner, VA 22182 | Copyright ©2019. All Rights Reserved. microstrategy.com EV-COLL-0969

Documents

DESIGN MOBILE APPS FOR ANDROID DEVICES