DESIGN MOBILE APPS FOR ANDROID DEVICES

Transcription

1 DESIGN MOBILE APPS FOR ANDROID DEVICES

2

3 Thank you for participating in a workshop at MicroStrategy World 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 Designing Mobile Apps for Android Devices 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 4 MicroStrategy

5 MicroStrategy World 2019 Workshop Book 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: Android Phone: 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 casesensitive): 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 MicroStrategy 5

6 Designing Mobile Apps for Android Devices 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. 13 Exercise 1: Update the revenue analysis page 2019 MicroStrategy, Inc. 6 MicroStrategy

7 MicroStrategy World 2019 Workshop Book 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 13 Exercise 1: Update the revenue analysis page 2019 MicroStrategy, Inc. MicroStrategy 7

8 Designing Mobile Apps for Android Devices Getting started creating similar folders, so you will need to navigate to the folder you created with your name. 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. 8 MicroStrategy

9 MicroStrategy World 2019 Workshop Book 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. MicroStrategy 9

10 Designing Mobile Apps for Android Devices 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. 13 Exercise 1: Update the revenue analysis page 2019 MicroStrategy, Inc. 10 MicroStrategy

11 MicroStrategy World 2019 Workshop Book 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. 13 Exercise 1: Update the revenue analysis page 2019 MicroStrategy, Inc. MicroStrategy 11

12 Designing Mobile Apps for Android Devices 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. 12 MicroStrategy

13 MicroStrategy World 2019 Workshop Book 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. MicroStrategy 13

14 Designing Mobile Apps for Android Devices 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. 14 MicroStrategy

15 MicroStrategy World 2019 Workshop Book 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. MicroStrategy 15

16 Designing Mobile Apps for Android Devices 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 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. 17 Exercise 2: Update the regional analysis page 2019 MicroStrategy, Inc. 16 MicroStrategy

17 MicroStrategy World 2019 Workshop Book 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. 29 Congratulations 2019 MicroStrategy, Inc. MicroStrategy 17

18 Designing Mobile Apps for Android Devices 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 MicroStrategy

19 MicroStrategy World 2019 Workshop Book 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. MicroStrategy 19

20 Designing Mobile Apps for Android Devices 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. 20 MicroStrategy

21 MicroStrategy World 2019 Workshop Book 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: MicroStrategy 21

22 Designing Mobile Apps for Android Devices 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. 22 MicroStrategy

23 MicroStrategy World 2019 Workshop Book 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 MicroStrategy 23

24 Designing Mobile Apps for Android Devices Designing Mobile Apps Android 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. 24 MicroStrategy

25 Designing Mobile Apps MicroStrategy World 2019 Workshop Book Android 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. MicroStrategy 25

26 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 Overview of Enterprise Mobility course. For resources and certifications with MicroStrategy Education, visit: MicroStrategy

27 MicroStrategy World 2019 Workshop Book MicroStrategy 27

28 1850 Towers Crescent Plaza Tysons Corner, VA Copyright All Rights Reserved. EV-COLL-0969 microstrategy.com