DESIGN TRANSFORMATIONAL IPAD APPS

Transcription

1 DESIGN TRANSFORMATIONAL IPAD APPS

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 Design Transformational ipad Apps Introduction In today s mobile world, users expect to have access to data-driven insights at any time, in any place. With MicroStrategy s transformational mobility capabilities, organizations can build feature-rich mobile apps that deliver powerful analytics to every user, enabling them to be more productive and effective while on the go. MicroStrategy Mobile Capabilities MicroStrategy features a drag-and-drop template for building mobile apps, so users can easily build intuitive dossiers and powerful workflow apps without writing a single line of code. These apps fully integrate with native ios and Android capabilities, including GPS, cameras, sensors, and notifications. They can harness the power of multimedia, geospatial analysis, security, and more all delivered through a single mobile app development platform. MicroStrategy Mobile apps go beyond data consumption; they can enable transactions that allow users to act on intelligence by writing back to data sources. They allow business users to communicate, take action, and use data to make better, faster decisions. 4 MicroStrategy

5 MicroStrategy World 2019 Workshop Book MicroStrategy Mobile includes a rich SDK package, giving organizations great flexibility in customizing their mobile apps, from changing the look and feel of the MicroStrategy Mobile app to creating custom widgets and apps that leverage MicroStrategy's analytics. In this workshop, you will build an app that equips technicians with the tools they need to perform their jobs safely and correctly. By leveraging database write-back capabilities, this app will allow technicians to submit job estimates and equipment inspections from any location. For this workshop, you ll need to download the MicroStrategy Mobile and MicroStrategy Library applications to your ipad. This workshop will also require the use of a computer. Though we will be building an app for ipads, MicroStrategy Mobile can also be consumed on phones and other tablets. If you did not bring an ipad or a laptop with you, or if your device permissions prohibit you from downloading software, please find a neighbor and form teams for the remainder of the workshop. Creating app pages in MicroStrategy Web: Documents Using MicroStrategy Web, you can develop a mobile app using code-free tools and a clickto-configure development canvas. You ll create app pages within a document template, link them together, and then deploy to a mobile device. Mobile is fully integrated with the MicroStrategy Analytics platform, so you can leverage existing visualizations, reports, and dossiers to rapidly deploy mobile business intelligence. MicroStrategy 5

6 Design Transformational ipad Apps While building documents in MicroStrategy Web, we ll work in two different modes: Design Mode and Editable Mode. Design Mode offers a full range of document creation options, but does not display actual data, whereas Editable Mode allows you to view the data while you design the document. Editable Mode also allows you to format grid and graph reports, including metric values and attribute headers. The images below depict the Performance page in Editable Mode and Design Mode: Editable Mode Design Mode 6 MicroStrategy

7 MicroStrategy World 2019 Workshop Book Getting Started You are a mobile app designer for Trustee Technicians, a nation-wide repair company. The company is expanding their group of field service technicians as the demand for on-site repairs grows. You ve been asked to create an app that enables the technicians to track their day-to-day work and easily submit estimate forms. After meeting with the COO and Trustee Technician s Mobile Architect, who leads the organization s enterprise mobility efforts, you ve developed the following app requirements: The app must be personalized for each technician Displays today s jobs, average job time, and customer satisfaction Shows the trends for the KPIs listed above, month-over-month Ability to comment on messages sent by colleagues Technicians can easily update their contact information within the app Ability to fill out a new estimate form, including job details and pictures The app will be deployed to MicroStrategy Mobile and MicroStrategy Library With these requirements in mind, you ve started to build out the app. In this workshop, you will finish the app and deploy it across the MicroStrategy Mobile platforms. Workshop Software Setup Follow the steps below to download the MicroStrategy Mobile App and the MicroStrategy Library App needed to complete this workshop. You will also use MicroStrategy Web to copy existing templates that you will use to create your very own mobile application. Configure the MicroStrategy Mobile App 1 Download the MicroStrategy Mobile for ipad app and the MicroStrategy Library for ipad app from the App Store (ios). MicroStrategy 7

8 Design Transformational ipad Apps 2 On your ipad device, tap on the configuration URL provided in the supporting files folder. The MicroStrategy Mobile for ipad application opens. MicroStrategy Mobile provides a one-step solution for opening an app via a 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 (link is case-sensitive): 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: mobileworkshop Password: mobileworkshop 3 Click the ipad Workshop project to open it: Folder browsing makes navigation intuitive and personalized. Users can access objects that relate to their specific roles and privileges. 4 Select the Shared Reports folder. 8 MicroStrategy

9 MicroStrategy World 2019 Workshop Book 5 Click and open the 3. Workshop Templates folder. Copy and create workshop templates Copy the Summary Template file 1 Right-click the Summary Template file and select Copy. 2 Click the Up One Level icon to open the Shared Reports folder. 3 Click the 4. Workshop Development folder. 4 Click the Create New Folder icon to create a new folder. 5 Name the folder your First Name_Last Name and click OK. 6 Name the file Summary.XY, replacing XY with your initials. Click OK. Copy the Add New Template file 1 Repeat the steps above to copy the Add New Template file, starting at Copy the Summary Template file. 2 Save the copy in the folder that you created and name it AddNew.XY, replacing XY with your initials. MicroStrategy 9

10 Design Transformational ipad Apps 3 Click Shared Reports in the navigation bar at the top of the window, as shown below: 4 Click the 4. Workshop Development folder, and then click your FirstName_LastName folder to open it. Exercise 1: Link the Documents To begin, you will link the Summary and Add New documents with navigation buttons, so users can easily move between pages easily. When you create a link between two documents or reports, you can execute the connected document or report, and pass parameters to answer prompts that are in the connected document or report. You can link from a text field, an image, or a button. All Trustee Technicians apps use buttons to link documents as outlined in your app creation guidelines. 1 Right-click the AddNew.YourInitials document you created and select Edit. 2 Your document opens in Design Mode. Right-click the Summary Page button and select Properties and Formatting. 3 From the list of properties on the left, click Button. Click the Properties icon to configure the button as a link. 10 MicroStrategy

11 MicroStrategy World 2019 Workshop Book 4 To select the Summary document as the target of the link, select Run this report or document and then click the Select Target button next to it, as shown below. 5 Browse to the Summary.YourInitials document in the 4. Workshop Development\FirstName_LastName folder. 6 Click OK to save changes. Click OK again to save changes. 7 Click Close to exit the Properties and Formatting window. To exit the document, click your folder name at the top of the screen. 8 Right-click the Summary.YourInitials document you created and select Edit. 9 Your document opens in Design Mode. Right-click the New Estimate Form button and select Properties and Formatting. 10 From the list of properties on the left, click Button. Click the Properties icon to configure the button as a link. 11 To select the Add New document as the target of the link, select Run this report or document and then click the Select Target button next to it. 12 Browse to the AddNew.YourInitials document in the 4. Workshop Development\FirstName_LastName folder. 13 Click OK to save changes. Click OK again to save changes. 14 Click Close to exit the Properties and Formatting window. 15 Save your document. In the Confirm Save window, select Do not ask me again. Then, click Yes. MicroStrategy 11

12 Design Transformational ipad Apps Exercise 2: Explore and Complete the Summary Page The Summary page is almost complete, but you ll want to add the following capabilities before launching it to your enterprise: A graph and KPI field displaying average customer satisfaction, comparing the field tech using the page against the performance of the average tech Transactions that allow the field techs to update their contact information Currently, the page contains two graphs showing the field tech how many jobs he has today and his average job time, compared to the average technician. Additionally, using Transaction Services, techs can exchange messages with their colleagues to answer questions and read reminders while they re on the road. Below is the completed page: MicroStrategy Transaction Services lets you embed write-back functionality into documents, dashboards, and applications enabling people to make decisions and initiate transactions while on the go. Users can interact with their data to approve requests, submit orders, change plans, and capture information such as updating data and images in ERP systems, CRM systems, and operational databases. In your app, users will be able to use Transaction Services to change their personal information, record new job estimates, and send the data back to the database. 12 MicroStrategy

13 MicroStrategy World 2019 Workshop Book Add the customer satisfaction KPI with a grid 1 Continue in the Summary.YourInitials document in Design Mode. 2 From the toolbar, click Insert, then select Grid. 3 You can create documents for devices with different screen sizes by using multiple views. You are designing this document for ipads in Landscape view but want all objects to be added to all views. To add this graph to the current view and others, select Yes in the pop-up window. 4 Click and drag the cross-hair icon in the layout area to position and size the grid below the Customer Satisfaction header. 5 From the Dataset Objects panel click All Technicians from the Summary Techs dataset and drag it into the rows of the grid. When you see a vertical yellow line, release the mouse button. Then, click and drag Month to the grid, to the left of All Technicians. 6 Click and drag Average Quality Score to the metrics area in the grid; release the mouse button when you see a horizontal yellow line. MicroStrategy 13

14 Design Transformational ipad Apps 7 Next, you want to format the grid, so it matches the other KPIs. Switch to Editable Mode by clicking the icon on the toolbar. 8 Hover over the Customer Satisfaction grid until the Resize icon appears. Right-click the icon and select Properties and Formatting. 9 Select Grid in the properties window. 10 Under Headers, deselect all options under Rows. Under Columns, only select Merge. Now, the grid will only display the Average Quality Score metric. 11 Under View, select Remove Extra Column so the Metrics column does not show on the page. 12 Under Format, select Colors and Lines. Select None under Borders to remove the border. 13 Click Font and change the color to Black. 14 You only want one decimal place to show. Select Number, then select Fixed. Type 1 in the Decimal Places box. 15 Finally, you ll want to center the number. Click Alignment, then change the Horizontal Text Alignment to Center. 16 Click OK to apply your changes. 19 Exercise 2: Explore and complete the Summary page 2019 MicroStrategy, Inc. 14 MicroStrategy

15 MicroStrategy World 2019 Workshop Book 17 Save the document. Now, when you run the document, you will see the image below. The top number displays average customer satisfaction by month, which is the KPI users should view. The bottom numbers, average score by each field tech, will be covered by the Customer Satisfaction graph. Create the Customer Satisfaction bar graph 1 Return to Design mode by clicking the icon in the toolbar. 2 Click Insert, then hover over Graph. You can design multiple types of graphs to display your data. For this page, select the Vertical bar. 3 Click and drag the cross-hair icon in the layout area to position and size the graph below the Customer Satisfaction grid. If the drop zones aren t visible, hover over the graph and click the Graph Zones icon. 4 From the Summary Techs data set, click and drag the Month attribute to the Categories drop zone. Then, click and drag All Technicians to the Series drop zone. 5 Click and drag the Average Quality Score metric to the Metrics drop zone. 19 Exercise 2: Explore and complete the Summary page 2019 MicroStrategy, Inc. MicroStrategy 15

16 Design Transformational ipad Apps 6 You only want to display three months at a time. You can add a filter to the graph to show only April, May, and June. Right-click the Graph and select Edit View Filter to narrow the data for end users. 7 Click Add Condition. 8 In the View Filter Editor, select Month. Then click In List. 9 Select April, May, and June. Then, click the check mark to apply the filter. 10 Click Save to add the filter to your page. 11 Save your document. 19 Exercise 2: Explore and complete the Summary page 2019 MicroStrategy, Inc. 16 MicroStrategy

17 MicroStrategy World 2019 Workshop Book Format the graph 1 You only want the top KPI to be visible. To resize the graph, right-click the graph. In the Properties menu, select Layout. In the Position boxes, type the following: Left: Top: In the Size boxes, type the following: Width: Height: Click OK to apply your changes. 4 To follow document design best practices, you want the graph to match the other graphs on the page, which use your corporate colors of red and yellow. Select Editable mode to change the Customer Satisfaction graph. 5 First, remove the grid lines. Right-click the graph and hover over Line, then select White. 6 To complete the formatting, right-click the graph, then select Format. You are going to add a legend for all the graphs, so you ll want to remove the 19 Exercise 2: Explore and complete the Summary page 2019 MicroStrategy, Inc. MicroStrategy 17

18 Design Transformational ipad Apps Customer Satisfaction legend. Select Format, and in the second drop down menu at the top, select Legend. Then, deselect Show. 7 To confirm the colors of the bars, select Series Shapes from the Format drop down. Keep the bar riser for Average Quality score selected. From the Color menu, ensure that Red is selected. 8 Choose the Bar Rise for All Others from the left drop down. From the Color menu, ensure Gold is selected. Click Apply to save your changes. 9 Click Numbers in the Format menu, then in the drop down, select All Axes. 10 Just like in the grid, you only want one decimal place to show. Select Number, then select Fixed. Type 1 in the Decimal Places box. 11 Click OK, then save your document. 12 Be sure to save your work frequently. You can check your saved results on your ipad any time that you want by browsing to your folder in the Mobile app. You 18 MicroStrategy

19 MicroStrategy World 2019 Workshop Book can also view the results in Web by switching to Presentation Mode. Go ahead and check your results now. MicroStrategy 19

20 Design Transformational ipad Apps Configure Transaction Services To complete this page, you want to give field techs the ability to edit their personal information and then submit it back to the database for updates. You ll need to add the Transaction report and then configure the appropriate transactions for each field. 1 Return to Design mode. Right-click the All Technicians text box, and select Configure Transaction. 20 MicroStrategy

21 MicroStrategy World 2019 Workshop Book 2 To add the Transactions report, click the Menu button. From the Shared Reports folder, click Data, then select the Jobs folder. 3 Select the Update Tech report. 4 Next, add the appropriate fields to map the transactions to the text boxes on the page, and select the control styles as outlined by the image below. You ll to select the Editable check boxes before you can select a Control Style. MicroStrategy 21

22 Design Transformational ipad Apps Format the State list 5 You ll want users to select their state from a list to avoid variations, for example VA instead of Virginia. Click the gear icon to modify the State@ID list. 6 Change the following properties: Input type: Dataset Source: States Attribute: State Displayed forms: ID Writeback form: ID 7 Select Allow submission without modification. This will allow users to confirm their information without submitting any changes. 22 MicroStrategy

23 MicroStrategy World 2019 Workshop Book 8 Click OK. The text boxes on the right now contain the gear icon, indicating that Transactions have been mapped. 9 Save your document. Interact with Transaction Services 1 On your ipad, view the Summary page. Fill out the form on the left, then click Submit. You will get an alert that your profile has been updated. The Submit button was previously configured to submit the transaction and display a message after submitting. 2 Tap the Comment section and add a comment to the Messages grid. Tap Submit. Your note now shows in the Comments column. MicroStrategy 23

24 Design Transformational ipad Apps During this workshop, participants are sharing the same MicroStrategy login. As a result, you may see other inputs that weren t your own. In a true implementation, you could filter the grid to show only your records, or those of your team members if you are a manager. Exercise 3: Complete the Add New page The Add New page allows field techs to submit a new estimate form back to the database, and to their managers, using Transaction Services. The Transaction mapping is complete, so you just need to complete the following: Configure the Discard Changes and Submit buttons Add the Photo Uploader widget The completed page is depicted below: Add the Photo Uploader widget Users can leverage the Photo Uploader widget to upload images from an iphone, ipad, or Android device. A user can choose to take a new photo, use an existing 24 MicroStrategy Exercise 3: Complete the Add New page 26

25 MicroStrategy World 2019 Workshop Book image on his mobile device, or delete images. In this case, the field techs will take a photo of the potential work that needs to be performed, and then submit that image with the estimate form. 1 Navigate to the AddNew.YourInitials document in Design Mode. 2 From the Insert menu, point to Widgets, then point to Mobile. Select Photo Uploader. Exercise 3: Complete the Add New page 26 MicroStrategy 25

26 Design Transformational ipad Apps 3 Click and drag the cross-hair so the widget is below the Priority field. A Grid/ Graph containing the widget is added to the document. 4 From the Dataset Objects panel, click and drag Photo Flag, Photo, and Batch into the grid. 5 Click and drag the grid so it takes up the bottom half of the left panel. This will allow users to view the full photo after it is taken. 6 To link the widget to the Transaction Services report, right-click the grid and select Configure Transaction. 7 Click the Menu button. From the Shared Reports folder, click Data, then select the Jobs folder. 8 Select the Insert Photo report. 9 Map the Input Properties per the grid below: 10 Click OK, then save your work. 26 MicroStrategy

27 MicroStrategy World 2019 Workshop Book Configure the buttons 1 Right-click the Discard Changes button and select Properties and Formatting. 2 Click Selector from the Properties menu. In the Action Type drop down, select Discard Changes and Require Confirmation. 3 In the Targets section, under Available, select BodyPS and GridGraphXXXX (the Photo Upload widget, where XXXX represents the GridGraph number), and use the Add icon to move them under Selected. When changes are made to either the panel stack containing the job details or the photo widget are made, users can tap the Discard Changes button to remove their entries. 4 Click OK. 5 Right-click the Submit button and select Properties and Formatting. 6 Click Selector from the Properties menu. In the Action Type drop down, select Submit. 7 Select Allow submission without network to allow offline changes, which will be written back to the database once the user has service. Also, select Require Confirmation, so users will be asked if they are sure they want to submit their changes. 8 Under Subsequent Actions, select Refresh the current document. After submission, the new estimate form will return to be blank. 9 To alert users that their submission was successful, select Display message after submitting, and type: Job submitted! Swipe right to view the cost estimate. 10 In the Targets section, under Available, select BodyPS and GridGraphXXXX, and use the Add icon to move them under Selected. Click OK. 11 Save your document. MicroStrategy 27

28 Design Transformational ipad Apps You have now completed the Field Technician mobile app for Trustee Technicians! View your app on your ipad and use the Add New page to submit a new job estimate. Swipe right to view your input. Optional Exercise: Access the Field Technician App from MicroStrategy Library Field technicians will access your app through MicroStrategy Mobile. Through this standalone mobile app, they can use transaction services to write-back to the database and interact with the documents you created. 28 MicroStrategy

29 MicroStrategy World 2019 Workshop Book Additionally, you can add your documents to MicroStrategy Library. This app provides a consolidated view where users can consume documents, dashboards, and dossiers. You can add documents to other users Libraries to foster internal collaboration. For example, the Regional Vice President for Sales can write a comment on a document page asking for more information on customer satisfaction. In this exercise, you will add your document to Library. Then, using the Library app, you will add comments to your document. 1 Right-click your Summary.XY document and select Share. 2 In the Share window, select Library Link. 3 Click on Link and this link to your ipad. 4 Then, click Launch to open Library in your browser. 5 A new browser opens. If prompted, enter credentials: Username: mobileworkshop Password: mobileworkshop 6 Click Add to Library to add the document to your Library. 7 Click the Library icon to open your Library main page. Here, you can view all the documents and dossiers you have saved in your Library. 8 You can now work with your Document on Web via MicroStrategy Library. View your document in Library Mobile With MicroStrategy Library, you can easily share a link allows other users to add your document to their Library. Links can be shared via , chat, or direct invite. MicroStrategy 29

30 Design Transformational ipad Apps 1 Tap on the link you sent to your in your ipad. 2 If a browser opens instead of the Library, tap Open to open the dossier in the MicroStrategy Library app. 3 Enter the environment credentials provided to you from your instructor at the beginning of the workshop. 4 To share your app, click the Share icon. Select Invite Users. 5 In the View selected window, type Mobile and select mobileworkshop. Tap Invite Users. 6 Your invitation has been sent to mobileworkshop. 7 Now that you know how to send your dossier to others, and view it in mobile, try it with your neighbor. 31 Optional exercise: Access the Field Technician app from MicroStrategy Library 2019 MicroStrategy, Inc. 30 MicroStrategy

31 MicroStrategy World 2019 Workshop Book Collaborate with multiple users By supporting a range of collaboration features, MicroStrategy Library make it even easier for teams to work together. Users can ask questions and highlight trends by commenting directly within the document. Tagged users can receive notifications via browser, , badge icon, and ios push notifications. 1 Click the Comments icon. Tag someone in the organization by with the message App-up-to-date and click Post. The comment is immediately posted to the recipient(s), creating a thread of communication between users. Conclusion You have completed the Design Transformational ipad Apps Workshop! Check your MicroStrategy Mobile App and MicroStrategy Library App in the ipad to: Analyze performance Review the new estimates Share Collaborate with users In this workshop, you successfully: Developed a Mobile application Linked documents within MicroStrategy Web Created a grid to display KPIs 35 Congratulations 2019 MicroStrategy, Inc. MicroStrategy 31

32 Design Transformational ipad Apps Created and formatted a graph Configured a Transaction Services document and Photo Uploader widget Sent your app to MicroStrategy Library to be shared with others in your company Collaborated with other users through MicroStrategy Library To learn more about mobile applications, MicroStrategy offers the Overview of Enterprise Mobility course and the Advanced Mobile Applications course. For resources and certifications with MicroStrategy Education, visit: MicroStrategy

33 MicroStrategy World 2019 Workshop Book MicroStrategy 33

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