Create a Mobile App in Record Time with MAX!

 

Before You Begin

Purpose

In this tutorial, you'll use Mobile Application Accelerator (MAX) to build a mobile app that leverages sample enterprise CRM (customer relationship management) data.

Time to Complete

Approximately 60 minutes.

Background

Oracle Mobile Application Accelerator (MAX) allows you to create and publish iOS and Android mobile apps without having to write a single line of code.

Scenario

In this tutorial, you're building a CRM (customer relationship management) app that connects your mobile sales force with the company data that they need to both develop sales opportunities and monitor them. This app delivers content using a service called CRM, which cross-references basic account information like company contacts against the opportunities in the CRM pipeline. Among other things, the service allows the app to display both numerical data, such as the number of opportunities for a sales region along with information about an opportunity, like its current stage within the sale cycle (Prospect, Appointment, Qualification, Presentation, Discussion, and Closing), the date that it was created, and the date on which the deal is expected to close. Using MAX, you can quickly incorporate this data into an entire application flow.

The app screens.
Description of this image

After users log in, the CRM app opens to a dashboard, whose metric counters, bar chart, and gauges provide a glimpse of the opportunities currently in play. It's also the entry point to more detailed information: tapping the metrics or gauges opens the first of a series of screens that not only describe the opportunities in increasing levels of detail, but also let users update an opportunity or create notes about an opportunity.

The CRM app provides users with collateral information about the opportunities through a screen flow that describes the accounts to which the opportunities belong.

The app screens.
Description of this image

What Do You Need?

  • The Oracle MAX App installed on your phone -- To run your mobile app on a phone, you need the Oracle MAX App. This is a free app that you can download from either the App Store or Google Play. To locate the app, search for "oracle mobile application accelerator".

    The MAX App in the App Store.

  • Check with your administrator to be sure that you have the following:

    • MAX 16.3.3 or higher

    • A MAX user account and test user account

    • The CRM Service -- This service is the cornerstone of your app, so you won't get far in this tutorial without it. If you don't have it already, don't worry -- your administrator can set it up quickly by importing this package. Take a look at Importing a Package to find out how.

 

Logging In

Log into Oracle Cloud using your MAX user name and password.

The Oracle Cloud Login page.
Description of this image

If this is your first visit, you'll see the following page (with an introductory video).

The Welcome page.
Description of this image

Otherwise, you'll see the Applications page:

The Applications page.
Description of this image
 

Creating the Application

After you log in, you can start off by creating the landing page of your app. In this case, the first screen that your sales reps will see after they log in is a dashboard which gives them bird's-eye view of their opportunities in the sale pipeline.The dashboard's upper region tallies these opportunities by their projected close date: 30 days, 60 days, and 90 days. The lower part of the dashboard breaks down the opportunities by different sales territories: North America (NA), South America (SA), Asia-Pacific (AP), and Europe (EU). The graph in the middle of screen shows the potential revenue projected for these regions.

The Dashboard is also the access point to the rest of the application. Users click on the counters to view lists of opportunities. If users want to see opportunities grouped by sales region, they can click one of the gauges at the bottom of the page.

In this section, you'll learn how to assemble this dashboard using the ready-made screen templates and data visualization components.

The CRM dashboard
Description of this image

  1. Click New Application.

  2. Give your app a name and then click Next.

    The Application Name page
    Description of this image

  3. Next, choose Simple Screen as the screen template. Click Next.

    The Screen Template screen.
    Description of this image

  4. Enter Dashboard as the screen title. Click Next.

    The Screen Title page.
    Description of this image

  5. Choose Dashboard as the content type. Click Next.

    The Content page.
    Description of this image

  6. Click Create.

    The Create and Review page.
    Description of this image

  7. After you finish selecting the basic layout for the Dashboard, MAX opens the Designer, where you can complete the user interface, hook it up to the CRM service, test the app, and when you're ready, publish it to your app users.

    The MAX Designer.
    Description of this image

On your first visit to MAX, you can watch a video that shows you around the Designer.

  • The Navbar -- Lets you access tools for creating screens, checking your overall screen flow, and accessing the services that provide data to your app. It also lets you open the Components Palette, which has UI components like lists, forms, and graphs.

  • The Preview -- Gives you an idea of how your app looks on a device while you're building it. You'll create your UI by dragging components from the Components Palette and dropping them into the Preview.

  • The breadcrumbs trail -- Tells you which component you're using. Use the breadcrumbs trail to select components.

  • The Properties Inspector -- Where you configure a component that you've selected in the Preview or in the breadcrumb trail. Using the Properties, Data, and Actions tabs of the Properties Inspector, you can define how you want a UI component to appear, display data, and respond to user gestures.

  • The build and test tools -- Tools that let you preview your mobile app within the Designer, test it on an actual device, and distribute it to users.

    You'll use these throughout this tutorial.

 

Laying Out the Dashboard

Before you can add the components that display the opportunity counts to the dashboard, you need to do some landscaping with tiles first. These tiles ensure that the metrics, bar graph, and gauges display how (and where) you want them within the dashboard. After you create the basic structure of the landing page using the Dashboard template, MAX adds the first of these tiles for you. It's called Tile 1. In this section, you'll use the Properties Inspector to configure this tile, which forms the foundation for the three metrics in the top region of the dashboard. To format this tile to hold the metrics counters:

  1. In the Preview, select the Tile component (Tile 1) to open the Properties Inspector for Tile 1.

    Tile 1
    Description of this image

  2. Use the Properties Inspector to set the tile's dimension and content layout:

    1. In the Tile Dimensions section, select 2x1 to allow the counters to fill the width of the screen.

      Tile dimension option

    2. Because you want to keep the three metrics together when the dashboard is viewed in both landscape and portrait modes, choose the layout option that divides the tile into three segments (Layout 9) from the Content Layout menu.

      Tile layout option.

    3. Re-title Tile 1 as Opportunity Pipeline and then center the title over the tile.

      The tile and title alignment options.

    4. Choose a color to set off the tile within the dashboard:

      1. Click Background.

        The Background option.

      2. Open the Background Color menu and pick a light, neutral color, like gray.

        The Color picker.

        The tile should look something like this:

        The top tile.

  3. Now that you've created top tile, you're ready to add visual elements to it using the ready-made UI widgets in the Components Palette.

    The Components Palette.

    The CRM service returns raw data for the number of opportunities that are projected to close within the next 30, 60, and 90 days, so you need a visual component that can be used as a simple counter. The Metric component, which displays a number and label, fits the bill.

    1. First, drag a Metric component from the Components Palette into the left-most tile.

      The Metrics component icon.

    2. In the Properties Inspector for the Metric component, define the label as 30d (for 30 days).

      The Metrics component.
      Description of this image

    3. Add two more Metrics components. Using the Properties Inspector, label them as 60d and 90d. When you're finished, the Preview and Properties Inspector should look like this:

      The Metrics components, configured.
      Description of this image

  4. Next, add the tile for the graph:

    1. In the breadcrumbs trail, select Dashboard so that the Dashboard component is selected in the Preview and in the Properties Inspector.

      The breadcrumbs trail.

    2. In the Properties inspector, click Create New Tile.

    3. Choose 2x1 as the tile dimensions.

      The Tile Dimensions option.
    4. Name this tile Revenue Potential by Region.

    5. Choose a light background color for the tile (like light blue). When you're done, the tile should look like this:

      The graph tile.

  5. With the tile complete, you can add a Bar Graph:

    1. Drag a Bar Chart component into the tile.

      The Bar Chart component.

      The Preview and Properties Inspector should look like this:

      The Preview and Properties Inspector.
      Description of this image

    2. This bar chart measures revenue by region, which can be expressed by a basic bar chart. But because each bar has an added dimension that segments each region by Opportunity ID (oid), choose Vertical Stacked bar chart.

      The Stacked, Vertical Barc Chart icon.

    3. To format the graph, click Legend and Titles and then do the following:

      • Remove the legend by choosing None.

        The None icon.

      • Clear the bar chart's Title checkbox because you're going to use the title that you gave the tile instead.

        The Bar Chart legend and title options.

        The Preview should look like this:

        The Bar Chart component.

  6. Now, add the gauges that use a stop light color scheme that indicates when displayed number of opportunities meets minimum, medium, and maximum quotas. For now, you're going to add the tiles and visual components for these gauges. In Adding Data to the Dashboard, you'll add color-coded thresholds that allow the gauge to change color when the number of opportunities meet, or fall below, certain ranges.

    1. In the breadcrumbs trail, select Dashboard so that the Dashboard component is selected in the Preview and in the Properties Inspector.

    2. Click Create New Tile. The Properties inspector for the tile (Tile 1) appears.

    3. In the Properties Inspector, rename Tile 1 as NA Region.

    4. Pick a neutral background color for the tile, like gray.

      The tile component.

    5. To create the first gauge, drag the LED Gauge component from the Components Palette into the NA Region tile.

      The LED Gauge component icon.

      Tip: Use the Search field to locate a component in the Components Palette.

      The LED Gauge component displays an integer like the Metric component does, but because it's a gauge, it can do something that the metrics counter can't: change from red to yellow to green when the integer returned by the CRM service meets, or falls below, certain thresholds.

      After you drag the LED Gauge into the NA Region tile, the Preview should look like this:

      The LED Gauge compoent in the Preview and Properties Inspector.

    6. Open the Properties Inspector for the Dashboard component by clicking the Dashboard in the breadcrumbs trail.

      The breadcrumb trail.

    7. Add the remaining files as follows:

      1. Click Create New Tile.

      2. Click New Tile twice to create a total of three tiles.

        The New Tile button

      3. Name the tiles SA Region, AP Region, and EU Region.

        Tip: If you need to scroll down in the Preview, first click within the Preview itself and then use the track wheel of your mouse.

      4. Set background color the tiles. For example, pick gray so that they all match (and complement the Opportunity Pipeline tile as well).

      5. Drag LED Gauge components into each of the tiles.

        Tip: Do one of the following if you need to open the Component Palette:

        • Click Components in the left navbar.

          The Components icon.

        • Double-click the Add icon in the tile.

          Click Add.

        When you're done, the dashboard should look something like this in the Preview:

        The region tiles.
 

Adding Data to the Dashboard

Congratulations! You completed the UI for accessing the CRM data in the dashboard. But right now, your app isn't connected to the CRM Service, meaning that it's only displaying placeholder data. Never fear -- you can quickly wire your UI to data using the various business objects that belong to the CRM service. A business object describes the data returned by the service using real-world terms, so you can figure out how to get the data you need easily.

Each business object is broken down into a set of fields that describe the describe the different types of data that is available through the service. For example, the Opportunity business object (which you'll use throughout this tutorial) has fields that describe various aspects of an opportunity, such as "salesstage," which describes the sale cycle by returning values like Appointment, Qualification, and Closing. You'll use these fields to back your UI with data. In addition to Opportunity, the other business objects that you'll use in this tutorial are Statistics, which returns numeric data for the dashboard components, and Account, which includes fields that return information about a company, such as its name, address, web site, and geographic region.

First, first, add data to the Metric components:

  1. In the Preview, select the 30d Metric component.

    The 30d Metrics component.
    Description of this image

    1. Click Data.

      The Data tab.

    2. Expand the menu in the Business Object field and then click Browse Service Catalog.

      The Browse Service catalog option.
      Description of this image

    3. From the Service Catalog, select CRM and then click Next. Because you've selected this service, it remains available throughout the development process. You don't need to select it again.

      The Service Catalog.
      Description of this image

      Tip: Use the filter to find a service quickly.

      The Service Catalog filter field.

    4. Choose Statistics and then click Select. The Statistics business object returns raw data for the opportunities projected to close in thirty, sixty, and ninety days.

      The Statistics business object.
      Description of this image

    5. To enable the 30d meter to display the number of the opportunities that are set to close in 30 days, drag count30d into the Value field.

      The Data tab of the Data Mapper.
      Description of this image

      Tip: Notice that the Data Mapper uses a color scheme for each data source, like pink for business objects (which is the case here) or yellow for fixed values (which you'll find out about when you map the data to the region gauges later on). Because you selected the Statistics business object, the Data Mapper opens the pink Business Objects tab and displays all of this business object's fields, which are also pink.

      When you're done, the mapping should look like this:

      Completed mapping.
      Description of this image

    6. Click Live Data Preview to see how the metric component displays data. The data used here is placeholder data known as mock data. As the name suggests, this isn't the actual data returned from the CRM service. Instead, it's an example of the data. You can use it to ensure that you're mapping data that's appropriate to the field type. Later on, you'll test the UI out using live data.

      Live Data Preview
      Description of this image

    7. Click Finish to return to the Designer.

      The mapped 30d Metric component.
      Description of this image

    8. Repeat these steps to populate the 60d and 90d Metrics components by dragging the count60d and count90d fields into the Value field. When you're done, the metrics should look something like this in the Preview:

      Mapped Metrics components.
      Description of this image

  2. Populate the bar graph:

    1. In the Preview, click the Bar Chart component.

      The Bar Chart component.
      Description of this image

    2. In the Properties Inspector for the Bar Chart component, click the Data tab.

    3. Open the Business Object menu and click Opportunities.

      The Business Opportunity list.

      Notice that MAX doesn't include the Statistics business object here, because it can't be used for graph components like bar charts. The Opportunities business object, however, has the fields that you can use to populate the x and y axes with data: revenue, region, and oid (Object ID). You'll revisit the Opportunities business object later in Adding Data to the List of Opportunities.

    4. Map the fields as follows and then click Live Data Preview to preview the graph:

      Drag this field... ...Into the bar chart field
      revenue Values (Y Axis)
      region Categories (X Axis)
      oid Colors (Series)

      When you're finished the Data Mapper should look like this:

      The Data Mapper.
      Description of this image

    5. Click Finish. In this stacked bar chart, the oid field segments the region bars by color.

  3. Next, begin populating the sales region gauge components, starting with NA Pipeline.

    1. In the Preview, click the NA Region LED Gauge component to open the Properties Inspector for the LED Gauge component.

    2. Click the Data tab.

    3. Choose Statistics from the Business Object menu.

      The Statistics option.
      Description of this image

    4. In the Data Mapper, drag countNA into the Value field.

      The Data Mapper.
      Description of this image

    5. Click Finish.

      The LED Gauge component.
      Description of this image
  4. To show users how the value returned from the service stacks up against target quotas, you need to set the color-coded minimum, medium, and maximum thresholds for the NA Region gauge as follows:

    1. Select the NA Region in the Preview (if it's not already selected) and then click the Data tab in the Properties Inspector.

    2. In the Data tab of the Properties Inspector, click the Add icon three times.

      Add Thresholds.

    3. Use the color picker to add red (minimum), yellow (medium), and green (maximum).

      The color picker

    4. Enter 5 as the minimum threshold (red) and 10 as the medium threshold (yellow). Because MAX considers the value returned for the field (which in this case, is countNA) as the maximum value, you just need to pick green from the color picker to complete the thresholds.

      Thresholds.

  5. Repeat these steps for the SA, AP, and EU gauges. Use the following field values of the Statistics business object.

    For this Gauge... ...Map this Value
    SA Pipeline countSA
    EU Pipeline countEU
    AP Pipeline countAP

    When you're done, the Preview should look like this:

    Completed LED Gauge component mapping.
    Description of this image

    The gauges are red because the mock data value is within the mini um range.

    Opening the Data Mapper shows that MAX added the minimum and medium thresholds (Threshold 1 and Threshold 2, respectively) as fixed values. Unlike the pink fields that are mapped from the business object, fixed value fields are yellow.

    The Data Mapper.
    Description of this image

  6. With the mapping complete, you can now see how the dashboard uses live data. Click Test.

    The Test button.

  7. Enter your test user name and password. Because you'll use the testing tools throughout this tutorial, click Save test user before you click Sign In.

    Test user login dialog.
    Description of this image

  8. Preview your app as an Android and iOS app in different orientations. Adding the background color to the region tiles makes them stand out when they float to new positions.

    The test window.
    Description of this image

  9. When you're done, click Back to Designer.

    The Back To Designer option.
 

Creating the Opportunities Screen Flow

In this step, you create the basic layout for the first screen of the Opportunities screen flow.

The Opportunties screen.
Description of this image
 

Adding the Screen

To add a new screen to your app:

  1. Click Application Screens in the left navbar.

    The Application Screens icon.

  2. Click New Screen.

    The New Screen button.

  3. For screen type, pick Detail and then click Next.

    The Screen Type page.
    Description of this image

  4. Choose Simple Screen. Click Next.

    The Create Screen page.
    Description of this image

  5. Enter Opportunities as the screen title.

    The Screen Title page.
    Description of this image

  6. Choose List. Click Next.

    The Content page.
    Description of this image

  7. Click Finish.

    The Review page.
    Description of this image
 

Adding Data to the List of Opportunities

Previously, you used the Data Mapper to wire the dashboard components to the CRM service. In this step, you're going to use the QuickStarts. Not only do they step you through binding data, but they'll build the entire screen flow for you as well.

  1. Click QuickStarts.

    The QuickStarts option.

  2. Click Add Data.

    The Add Data QuickStart.

  3. Complete the wizard as follows:

    1. Choose the default layout option and then click Next.

      The default layout option.

    2. In the Select Data Source screen, choose Opportunities and then click Next.

      The Opportunity business object option.

    3. Complete the data mapping as follows and then click Next:

      Map this field... ...To this field
      winpercent Graphic Source
      desc Title
      salestage subtitle
      revenue Value 1
      region Value 2

      When you're done, the Data page should look like this:

      Completed mapping for Opportunities list.
      Description of this image

    4. You don't need to filter the data, so click Next and then click Finish in the Query page to complete the mapping. You won't see the win percent data in the Graphic Source field, but you will after you complete the next step, where you change its field type to a circular meter.

      The Preview.

  4. Because the winpercent field returns the win percentage for an opportunity and not an image (which is the default field type for an icon), you need to change the icon field type to a circular meter. To do this:

    1. Double-click the Icon field in the Preview.

      The Icon field.

      Tip: If needed, click QuickStarts to dismiss the QuickStarts panel.

    2. In the Properties Inspector, open the Field Type menu and then choose Circular Meter.

      The Status Meter icon.

      The Opportunities list now displays the mapped data:

      The Preview with the List component.
      Description of this image
 

Creating the Opportunities Details Screen

In this step, you'll create the detail screen that's comprised of a summary panel that displays the deal's highlights by replicating the opportunity name, win percent, and sales stage that display in the Opportunities screen. Users can reference this information as they access more detailed information using the screen's Details, Account, and Notes tabs. In addition to providing users with the specifics about an opportunity, this screen enables users to update an opportunity, or add notes.

The Opportunity screen.
Description of this image

  1. Open the List component in the Properties Inspector by clicking List in the Properties Inspector or in the breadcrumbs trail.

    Navigate to List component properties.

  2. Click QuickStarts.

    The QuickStarts option.

  3. Click Add a Detail Screen.

    The Add a Detail Sceen option.

  4. Complete the Add a Detail Screen wizard as follows:

    1. Choose Screen with Top Tabs and Summary and then click Next.

      The Screen with Top Tabs option.

    2. Enter Opportunity as the screen name. Name the tabs Detail, Accounts and Notes. Click Next.

      The Screen Name page.
      Description of this image

    3. You're going to create an edit screen that's based on this screen, so choose Form as the content type. Forms allow user input (unlike lists). Click Next.

      The Form component.

  5. In the Review page, click Finish.

 

Creating the Summary

The Opportunity screen has a summary panel that displays key details about an opportunity. This panel which displays the win percentage as a circular meter along with the company name, sales stage, and projected opportunity revenue behaves like a banner: it's always on display, allowing users to reference it while viewing related information in the Details, Account, and Notes tabs.

The Summary panel can only hold one UI component, like a single graph, a form, or an image. To allow it to accommodate a set of fields along with circular meter, add the Card component.

  1. In the Properties Inspector, click Go to Detail Screen.

    The Go to Detail Screen option.

  2. Open the Components Palette by double-clicking the Add button in the Summary pane or the Components icon in the navbar.

  3. Select the Card component.

    The Card component in the Components Palette.

  4. Drag the Card component into the Summary pane.

    The Card component
    Description of this image

  5. To enable the win percent circular meter to display within the summary pane, change the Graphic field type as follows:

    1. Click Graphic to open the properties tab.

      The Graphic option

    2. Choose circular meter from the Field Type list.

      The Status Meter option.
  6. Bind the Card component to data:

    1. Open the Properties Inspector for the Card component by selecting it in the Preview or from the breadcrumbs trail.

      The Card component in the breadcrumbs trail.

    2. Click Quickstarts and then click Add Data.

      The Add Data option

    3. In the Data Source page, choose Opportunity and then click Next. Notice that the Data Mapper includes all of the fields (which include Subtitle 1 and Subtitle 2) that you've selected for the Card component.

      The Data Mapper for the Card component.
      Description of this image

    4. Map the fields as follows:

      Map this Opportunity field... ...To this Card field
      winpercent Graphic Source
      desc Title
      salesstage Subtitle 1
      revenue Subtitle 2

      The mapping should look like this:

      The completed mapping for the Card component.
      Description of this image

    5. Click Next to go the Query page. The Oid (Opportunities ID) field in the Query Parameters section is already mapped. (Notice that the Oid field is purple, which indicates that it belongs to the Parent Screen category. In this case, the parent screen is Opportunities.) MAX anticipates that this value, which is unique for each opportunity, will return the correct data in the Opportunity screen. Accept this value and then click Finish.

      The oid query parameter for the Card component.

  7. Lastly, conserve the screen real estate by resizing the summary panel:

    1. In the Preview, open the Properties Inspector for the screen by clicking the header.

      The header of the Opportunity screen.

    2. In the Summary Size section of the Properties Inspector, click Custom.

      The Custom sizing option.

    3. Decrement the size to 100.

      The Summary size option.
      Description of this image
 

Creating the Details Tab

In this step, you'll add a tab to the Opportunity page that supplements the information that displays in the summary pane of the screen by displaying the sales region, the products included in the deal, and dates for the creation of the opportunity and its expected close.

The Opportunity screen
Description of this image

  1. Select the Form component in the Preview.

    The Form component properties.
    Description of this image

  2. Click QuickStarts.

  3. Click Add Data.

    The Add Data QuickStart option.

  4. Complete the mapping as follows:

    1. In the Data Source page, pick Opportunity and then click Next.

      The Opportunity business object option.

    2. In the Data page, build the edit form by dragging the following fields from the Opportunity section into the Form Component Fields section:

      1. createdate

      2. expectedclose

      3. region

      4. products

        The Data page.
        Description of this image

    3. Click Next to advance to the Query page, which shows that the oid (Opportunity ID) from the parent screen, Opportunities, filters the data. You don't need to add or remove any values, so click Finish.

      The Query page.

      The Details page should look like this in the Preview:

      The Opportunity Details page.
      Description of this image

  5. Now that you've populated the detail screen with fields, you need to finesse the UI to make it more user-friendly by changing some of the field names and formats:

    1. If needed, dismiss the QuickStarts panel by clicking Properties.

      The Properties Inspector

    2. In the Properties Inspector for the Form component, click Fields

      The Fields option.

    3. Click Createdate to open the Properties Inspector for this field.

      The Createdate option.

    4. Enter Created in the Field Label field.

    5. To make the date easier to read, choose Date Time as the field type.

      The Date Time field type.

    6. Click Fields to return to the Fields Properties Inspector.

      The Fields navigation option.

    7. Repeat these steps to rename Expectedclose as Closing and change its field type to the Date Time format.

    8. To allow the Products field to better accommodate the output text, first select the Products field in the Preview. Next, use the Properties Inspector to change the field type to Text Area. Increment the area's rows to 5.

      The Preview and Properties Inspector
      Description of this image

  6. Finally, reorder the fields by dragging and dropping them in place using the move function.

    The move function.

    To do this:

    1. Click Fields.

      The Fields option.

    2. Use the move function to rearrange the field order as follows:

      1. Region

      2. Closing

      3. Created

      4. Products

        When you're done, the Preview and Properties Inspector should look like this:

        The re-ordered fields.
        Description of this image
 

Creating the Edit Details Screen for an Opportunity

The Edit Opportunity screen enables users to track their progress on a deal.

The Edit Opportunity screen.
Description of this image

  1. Select the Form component by clicking Form in the breadcrumbs trail.

    The Form component in the breadcrumbs trail.

  2. Click QuickStarts if the QuickStarts panel is not already displayed in the Properties Inspector.

    The QuickStarts icon.

  3. Click Add Edit Screen.

    The Add Edit Screen QuickStart wizard option.

  4. Click Go to Edit Screen.

    The Go To Edit Screen option.

    The Edit screen displays in the Preview, which has Cancel and Save actions in the header. The screen includes all of the fields from the Opportunity screen except for the createdate field. MAX doesn't include this field because app users can't change the value provided by this field. By design, the services that back a MAX application have fields that users can edit as well as those they can't. MAX excludes this latter group automatically when you build edit screens using the QuickStarts.

    The Edit Detail screen
    Description of this image

  5. This edit screen should look like the detail screen, so you need to reorder and rename fields. You also need to change some of the field types. In some cases, you'll do this so that the fields in this edit screen match their counterparts in the detail screen. In other instances, you'll change the field type so that users can pick a different region or sales stage.

    1. In the Properties Inspector, click Fields.

      The Fields option.

    2. Reorder the fields to match the Detail screen:

      1. Desc

      2. Revenue

      3. Winpercent

      4. Salesstage

      5. Expectedclose

      6. Region

      7. Products

      To do this, use the move function to drag the fields into place.

      The Move function.

      When you're done, the Properties Inspector should look like this:

      The Fields Property Inspector.
      Description of this image

    3. For the Desc field, enter Name in the Field Label field.

    4. Click Winpercent. Change the name to Win%.

      The Winpercent field.

    5. Choose circular meter from the Field Type menu.

      The Status Meter option.
      Description of this image

    6. Next, select SalesStage from the menu in the Properties Inspector.

      Salesstage.

    7. Enter Stage in the Field Label field. Change this field from output text to a list of items by choosing Select from the Field Type menu.

      The Select component icon.

    8. Select the Region field and then choose Select from the Field Type menu to create another list of items.

    9. Rename the Expectedclose field as Closing and change its field type to Date Time.

      The Data Time icon.

    10. For the Products field, change the field type to Text Area and expand the field to five rows.

      The Text Area icon.

      When you're finished, the Edit Opportunity screen should look like this:

      The Edit screen in the Preview.
      Description of this image
 

Creating the Accounts Tab

In this step, you'll add a tab that displays some basic information about the account related to the selected opportunity.

The Accounts tab.
Description of this image

  1. Navigate back to the Opportunity screen by first clicking Screen Flow in the left navbar.The Screen flow tool shows you all of the screens that you've created so far. Double-click the Opportunity snapshot in the screen flow to open the Opportunity screen in the Preview.

    The screen flow window.
    Description of this image

  2. In the Preview, click the Account tab.

    The Notes tab.
    Description of this image

  3. Double-click Add Component in the Preview to open the Components Palette.

  4. Select the Form component in the Components Palette.

    The Form component in the Components Palette.

  5. Drag the Form component into the Preview.

    The Form component.
    Description of this image

  6. In the Properties Inspector, click QuickStarts and then click Add Data.

    The Add Data QuickStart wizard option.

  7. Complete the Add Data QuickStart as follows:

    1. Choose Opportunities in the Select Data Source page and then click Next.

      The Opportunity business object option.

    2. In the Data page, first expand the account field.

      The Account field option.

      The fields of the account object display.

      The Data page.
      Description of this image

    3. Drag the Account fields into the Form Component Fields section in the following order:

      1. name

      2. website

      3. address

      4. city and state -- create a concatenated field by dragging these two into the same field.

      5. country and region (another concatenated field)

        When you're done, the Data page should look like this:

        The Form field mapping.
        Description of this image
    4. Next, Next. In the Query page, click Finish. (You don't need to filter the returned data.)

      The mapped Form component.
      Description of this image
 

Adding the Notes Tab

In this step, you'll create a list of notes for each opportunity that are written by various app users. Each list item identifies the notes' author by app user name.

The Opportunity screen.
Description of this image

  1. In the Preview, click the Notes tab.

    The Notes tab
    Description of this image

  2. Double-click Add Component to open the Component Palette.

    The Add Component function.

  3. Drag a list component into the lower pane of the Preview.

    The List component icon.

    The Properties Inspector for the List component should be open.

    The List component properties.
    Description of this image

  4. Click Quickstarts and then click Add Data.

    The Add Data QuickStart.

  5. You don't need all of the list fields, so choose the option that includes only the Title, Subtitle, and Value 1 fields and then click Next.

    The list layout option.

  6. In the Data Source page, choose the Opportunity Notes business object.

    The Opportunity Notes option.

  7. Map the fields as follows:

    Map this Opportunity Notes field... ...To this List Component field
    createdate Title
    comment Subtitle
    username Value 1
    The Data page.
    Description of this image

  8. Click Next to move to the Query screen, which shows that the oid (Opportunity ID) from the Opportunities screen. The oid filters the data that the service returns to the list. Click Finish.

    The Query page.

    The populated list of notes should display in the Preview like this:

    The Preview.
    Description of this image
 

Adding the Create Note Screen

In this step, you'll create a form that enables users to jot down notes for a selected opportunity.

The Create Note screen.
Description of this image

  1. In the Preview, select the screen component by clicking the Opportunity header.

    The header of the Opportunity screen.
    Description of this image

  2. In the Properties Inspector for the Screen component, click Header Buttons.

    The Header Buttons option.
  3. In the Header Buttons panel, click Button.

    The Add Button function.
  4. Enter Create Note in the Button Label field.

    The Button Label field.

  5. Click Action in the Properties Inspector.

    The Action tab.

  6. Click Add Action.

    The Add Action option.

  7. Choose Tap.

    The Tap action option.

  8. Click Navigate to Field.

    The Navigate to Screen option.

  9. Put it in the DRAG AN ACTION HERE slot.

    The Navigate to Screen option, selected.

  10. Click Add.

    The Add button.

  11. Create the screen as follows:

    1. In the Screen type page, pick Create and then click Next.

      The Create Screen template.

    2. In the Title page, enter Create Note and then click Next.

    3. Choose Opportunity Notes (the business object that you picked to populate the List components in the Notes tab) from the Business Object menu and then click Next.

      The Opportunity Notes business object.
      Description of this image

    4. Click Finish to return to the Action tab.

      The Action tab.

    5. Click Navigation Data Mapper.

      The Navigation Data Mapper button.

      The Configure Navigation Data Mapping page shows that the Opportunity ID (oid) is passed between the Notes tab of the Opportunity screen and the Create Note screen.

      The Navigation Data Mapper page.
      Description of this image

    6. From the Current Screen category (which should be open by default), drag oid into both of the Oid fields.

      The Navigation Data Mapper page.
      Description of this image

    7. Click Finish and then click Save in the Action tab.

      You'll revisit the Navigation Data Mapper when you plot the interactions within the screen flow.

  12. Click Go to Create Note.

    The Go to Create Note link.

  13. The CRM service populates Comment and Username as the input fields in the form. Since you're going to display the name of the logged in user in the Notes tab, you don't need the user to add his or her name here. To remove the Username field, first right-click it in the Preview and then choose Delete.

    The Delete function in the Preview.

  14. Right now, the Comment field is only a single line, so it might not provide enough space for users to enter notes. To make it easier to use:

    1. Open the Properties Inspector for the Comment field by either double clicking it in the Preview or by clicking Comment in the Properties Inspector.

      The Comment option.

    2. Choose Text Area as the screen type.

      The Text Area icon.

    3. Add some helpful text in the Hint field, like Type your comments here....

    4. Increase the number of rows to 10.

      The Text Area configuration options.
      Description of this image
 

Populating the Notes Tab with the User Name

In addition to navigation actions, MAX also provides business actions, like the ones that refresh data. You can't edit these actions, but by using the Business Action Mapper, you can change the custom business actions that have been created as part of the service. In this step, you'll change the custom action called Create Opportunity Notes so that your app users' names appear next to the notes that they create.

  1. Select the screen component for the Create Note page by double-clicking the header bar in the Preview.

    The header for the Create Note screen.

  2. Click the Actions tab in the Properties Inspector.

    The Actions tab.

  3. Click Create Opportunity Notes. This is a custom action for the Opportunity Notes business object.

    The Create Opportunity Notes option.

  4. Click Business Action Mapper.

    The Business Action Mapper button.

    The Configure Business Action Parameters page reveals how the Create Opportunity action enables the Create Screen to interact with Notes tab: it tracks new notes using the Opportunity ID (oid) from the parent Opportunity screen and it maps the values from the Create Notes' Comment and Username fields. The Create Notes screen has only one input field (Comments); app users can't enter their names here. To allow the name of the current user populate the list in the Notes tab alongside the comment that's entered in this screen, you'll need to change the parameter mapping.

    The current screen values.
    Description of this image

  5. First, delete the Current Screen value from from the Username field. You don't want this parameter because it won't return the name of the current app user to the Notes tab.

    The Action Parameters
    Description of this image

  6. Expand the Application User category.

    The Application User category.
    Description of this image

  7. Drag User Name into the Username field to populate the screen with the name of the current app user.

    The User Name field.
    Description of this image

  8. Click Finish and then click Save after you return to the Configure Actions page.

 

Creating the Accounts Screen Flow

In this step, you create a second screen flow that gives your users access to account information. The first screen lists your company's accounts. When users click a list item in this screen, they'll open a detail screen that shows them some basic information about the account itself and list of the opportunities that belong to it. As you did previously, you'll use the QuickStarts to build this screen flow.

The Accounts list screen.
Description of this image
 

Adding the Accounts Screen

The Designer provides you with different ways to add screens to an app. Previously, you used Application Screens in the navbar to add the Opportunities screen. Here, you'll add a screen using the Properties Inspector for the Application Menu component.

  1. Open the Dashboard by double-clicking the Dashboard snapshot in the screen flow.

    The screen flow window.
  2. In the Preview, click the menu icon to open the Application Menu component in the Properties Inspector.

    The app menu icon.

  3. In the Properties Inspector for the Application Menu component, click Menu Item.

    The Menu Item option.

  4. Complete the Create Screen wizard as follows:

    1. In the Landing Screen page, choose Simple Screen and then click Next.

      Simple Screen option.

    2. Enter Accounts in the Screen Title screen and then click Next.

    3. In the Content screen, choose List and then click Next.

      The List template.

    4. Click Finish.

    5. Click Accounts in the Preview. Then click Go to Screen in the Properties Inspector.

      The Go to Screen button.

 

Adding Data to the List

Previously, you enabled the dashboard components to display data using the Data Mapper tool. In this (and subsequent) steps, you'll use the QuickStarts. These wizards not only allow you to add data to your UI, but enable you to build entire screen flows.

To add data to the accounts list:

  1. In the Properties Inspector for the List component, click the QuickStart icon.

    The QuickStarts icon.

  2. Click the Add Data Quickstart.

    The Add Data Quickstart option.

  3. In the Layout page, choose Title, Subtitle.

    The Select Layout page.

  4. Choose Account as the business object.

    The Select Data Source page.

  5. Map the Accounts business object fields to the List Component as follows and then click Next.

    • Drag name to the Title field.

    • Drag city, state, country and region into the Subtitle field.

    The Map Data Fields to UI page.

  6. We're not going to filter this data, so click Finish in the Query page.

    The Configure Query Parameters page.

    Back in the Designer, the Accounts list displays in the Preview showing mock data.

    The mapped list component.
    Description of this image
 

Creating the Account Screen

In this step, you add a screen that lets your users see the opportunities that belong to a selected account along with some high-level information about the account itself.

The Account screen.
Description of this image

  1. Click Add a Detail Screen.

    The Add a Detail Screen option.

  2. Choose Simple Screen with Summary.

    The Screen Type page.

  3. Enter Account in the Screen Title field and then click Next.

    The Screen Title page.

  4. Choose List and then click Next.

    The Content page.

  5. Click Finish.

    The Review page.

  6. Click Go to Detail Screen.

    Go to Detail Screen.

  7. Open the Components Palette and then select the Card Component.

    The Components Palette

  8. Drag the Card component into the Summary Panel in the Preview.

    The Card component.
    Description of this image

  9. In the Properties Inspector, click the Properties tab.

    The Properties tab.

  10. In the Properties Inspector for the Card component, clear the Graphic option. For this card, you're going to map data to the card's Title, Subtitle 1, and Subtitle 2 fields.

    The Card component display properties.

  11. Open the QuickStart menu, choose Add Data and then choose Account. Click Next.

    The Account business object.

  12. In the Data tab, map the fields as follows and then click Next.

    Map this value... ...to this field
    name Title
    city, state, country, region Subtitle 1
    website Subtitle 2
    The Data page.

  13. You need to filter the data by the Account ID (aid) so that users can see the opportunity details that belong to an account. MAX has volunteered the aid from the parent screen (Accounts), so click Finish.

    The Query page.

    In the Preview, the card displays mock data.

    The Summary tab in the Preview.
    Description of this image

  14. Resize the summary pane:

    1. Double-click the Account screen header in the Preview.

      The Account screen header.

    2. Click the Properties tab in the Properties Inspector if it's not already open.

    3. In the Properties Inspector, click Custom and then decrement the size to 100.

      The Summary sizing options.

  15. Next, add data to the List component:

    1. Select the List component in the Preview or in the breadcrumbs trail.

      The List component.
      Description of this image
    2. If the QuickStarts panel doesn't appear, click QuickStarts and then click Add Data.

    3. You need all of the list fields for the account details, so choose the default layout and then click Next.

      The default List format.

    4. In the Data Source page, click Opportunities.

      The Opportunity business object.

    5. Map the fields as follows and then click Next:

      Map this value... ...to this field
      winpercent Graphic Source
      desc Title
      salestage subtitle
      revenue Value 1
      region Value 2

      The Data screen should look like this:

      The List component mapping
      Description of this image

    You'll see the mapped data when you change the Icon field type from a graphic to a circular meter. You'll do that after you filter the data in the next step.

  16. You need to filter the data by the Account ID (aid) to allow users to see the opportunity details that belong to an account. Because the aid parameter belongs to the Accounts screen, click the Parent Screen category. Next, drag aid into the Aid field in the Query Parameters section of the screen. Click Finish.

    The Query tab.
    Description of this image

  17. In the Preview, select the Icon field.

    The icon field.

  18. Change the icon field from an image to a circular meter. The list data displays.

    The icon field mapped as a status meter.
    Description of this image
 

Adding Navigation

The QuickStarts added the screen navigation for the Opportunities and Accounts screen flows for you. You can traverse back and forth within them, but at this point, you can't access one from the other. Further, the dashboard isn't connected to the Opportunities flow, meaning that if you ran the app right now, it would open to the dashboard, but you couldn't drill down to the list of opportunities. In this step, you'll tie the app together by creating navigation actions from the dashboard to the Opportunities screen and from the Account screen to the Opportunity screen.

 

Mapping the Dashboard Metrics

In this step, you're going enable your users to drill down from the dashboard into the list of opportunities.

  1. Navigate to the Dashboard using either the Screen Flow or Application Screens tools in the navbar.

    The Account Detail menu item.

  2. In the Preview, select the 30d metric component.

    The Opportunities tab.

  3. In the Properties Inspector, click Actions.

    The Actions tab.

  4. Click Add Action.

    The Component Action option.

  5. Click Tap.

    The Tap action option.

  6. In the Configure Action page, choose Navigate to Screen as the action that's triggered when a user taps a list item.

  7. Move the Navigate to Screen action into the field that says DRAG AN ACTION HERE.

    The Navigate to Screen action.

  8. Choose Opportunities from the Screen menu and then click Save.

    The Screen menu.

  9. By setting the Opportunities list as the target screen, you enable users to open the list of all of the opportunities when they click the 30d metric. You need to refine this mapping so that users see only the opportunities that are projected to close within 30 days when they click this metric. You'll narrow the items that display in the Opportunities page using the Navigation Data Mapper:

    1. Click Navigation Data Mapper.

      The Navigation Data Mapper button.
      Description of this image

    2. The Current Screen category is open, displaying the field values that belong to the Statistics business object which back the Dashboard's LED Gauge components with data. Because these fields are used to return integers, you can't use them to control the display in the Opportunities screen. You're going to add a value instead, so click the Fixed Value category.

      The Fixed Value category.
      Description of this image

    3. Drag Fixed Value into the Closein field and then enter 30.

      The Mapped Closein field.
      Description of this image

    4. Click Finish and then click Save after you return to the Configure Action page.

  10. Repeat these steps for the 60d and 90d metrics by adding 30 and 60 in the Closein field.

 

Mapping the Gauges

  1. In the Preview, select the NA Region tile.

    The NA Pipeline tile.
    Description of this image

  2. Click the Action tab in the Properties Inspector.

    The Action tab.

  3. Click Add Action.

    The Add Action option.

  4. Click Tap.

    The Tap action option.

  5. Choose Navigate to Screen and then pick Opportunities from the Screen menu.

  6. Like the counters, you want to filter the items that display in the Opportunities list. This time, you'll use the region codes to filter the data. To start off, click Navigation Data Mapper.

    The Navigation Data Mapper button.

  7. Open the Fixed Value category and then add a fixed value of NA to the Region field.

    The Region field mapping
    Description of this image

  8. Click Finish and then Save.

  9. Repeat these steps for the rest of the gauge tiles. Enter SA, EU, and AP in the Region field.

  10. Click Screen Flow in the left navbar to take a look at the navigation from the Dashboard to the Opportunities screen.

    The Screen Flow
    Description of this image
 

Linking the Accounts Screen Flow to the Opportunities Screen Flow

In this step, you'll enable users to drill down from the Account detail screen to the Opportunity detail screen.

  1. In the Screen Flow window, open the Account screen by double-clicking the Account screen shot.

    The Account screen shot

  2. Select the List component in the Account screen.

    This List component.
    Description of this image

  3. Click the Actions tab.

    The Actions tab.

  4. Because you created this screen using the QuickStarts, MAX has already added the Load Screen action for the List component. Because you're going to add one more, click Component Action.

    The Component Action option.

  5. Click List Item.

    The List opttion

  6. Click Tap.

    The Tap action option.

  7. Choose Navigate to Screen and then pick Opportunity from the Screen list.

    The Navigation Data Mapper.
    Description of this image

  8. Click Navigation Data Mapper.

    The Navigation Data Mapper button

  9. If it's not already selected, click the Current Screen category.

    The Configure Navigataion Data Mapping page
    Description of this image

  10. Map the Opportunity ID (oid) field to each Oid field in the Opportunity Screen Parameters section.

    The Configure Navigation Data Mapping page
    Description of this image

  11. Click Finish and then click Save after you return to the Configure Action page.

    With the navigation complete, the screen flow should look like this:

    The screen flow page.
    Description of this image
 

Testing the App

At any point, you can test the app using the web-based simulator, or the MAX App.

 

Testing the App in the Designer

In this step, you return to the simulator to test the screen flow.

  1. Click Test.

    The Test icon.

  2. Find out which opportunities will close in 30, 60 or 90 days by clicking the metrics in the Opportunity Pipeline section to open the Opportunities page.

    Opportunity metrics

  3. Click a list item to find out more about an opportunity.

    The list of opportunities.

  4. Click through the tabs of the Opportunity screen.

    The Opportunity screen's tabs.

  5. Click Edit.

    The Edit action.

  6. Update the opportunity by changing the region and the sales stage and then click Save or Cancel.

    The Edit Opportunity screen select lists.

  7. Click Create Note.

    The Create Note action.

  8. Add a note and then click Save.

    The Create Note screen.

    Your new note appears in the Notes tab with your test user name next to it.

    The Notes tab of the Opportunity screen.

  9. Click Back to return to the dashboard.

    The Edit action.

  10. To sort the list of opportunities by region, click the region counters.

    The region counters.

  11. Drill down from the Opportunities screen and repeat the previous steps to view details, update an opportunity, and add notes.

    The Opportunities screen.

  12. Next, test the Accounts screen flow:

    1. Return to the dashboard and then click the menu icon.

      The menu icon.

    2. Click Accounts.

      The Accounts menu item.

    3. Click an account to open the details screen.

      A list item in the Accounts screen.

    4. Click a list item to open the Opportunity screen.

      A list item in the Account screen.

    5. Update an opportunity or create a note.

      The Details tab of the Opportunity screen.

    6. When you're done, click Back to Designer.

      The Back To Designer option.

 

Testing the App on a Phone

You can install the test version of the CRM using the MAX App. You install the CRM app by scanning a QR code with the MAX App.

To generate this QR code.

  1. Click Test.

    The Test icon.

  2. Click Test on Phone.

    The Test on Phone button.

  3. Click Build Test Application.

    The Build Test Application button.

    MAX generates the test QR code.

    The generated QR code.

  4. Click the Show QR Code icon.

    The Show QR Code icon.

    The QR code for testing appears. When you're ready to share your app, you'll generate a second QR for the final version of the app.

    The QR code.

  5. On your phone, click the MAX app icon to open the MAX App.

    The MAX App launch icon.

  6. In the MAX landing page, click Scan.

    The Scan icon.

  7. Aim the scanner at the test QR code.

    The MAX APP scanner.
  8. Log in with your test user name and password.
    The login page.
    Description of this image

  9. Repeat the steps for testing an app using the simulator, beginning with drilling down from the dashboard's metrics and gauges.

 

Sharing the App

Now that you've test the app, you're ready to share it with your users by giving them a QR code for the published app.

To generate this QR code:

  1. In the Designer, click Publish.

    The Publish icon.

  2. Click Publish in the publish dialog.

    The Publish dialog.

  3. In the Confirm Publish dialog, click Publish.

    The Confirm Publish dialog.

  4. On your phone, open the MAX app and then scan the QR code for the published app.

    The MAX icon.

  5. Log in using your MAX user name and password.

    The Login page.
    Description of this image

    Tip: If you're running the published version of the CRM app on the same phone that you used to test it, you need to first delete the MAX App and then reinstall it before you scan the QR code for the published app.

 

Want to Learn More?