Wednesday, October 26, 2016

Creating an Application in Oracle Max - Part 5 - Adding Navigation and Testing


Continuing our series of Oracle Mobile Application Accelerator blog posts we will now set some navigation up

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.
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.
  1.  the Preview, select the 30d metric component.
  2. In the Properties Inspector, click Actions.
    1. Click Add Action
    2. Click Tap.
    3. In the Configure Action page, choose Navigate to Screen as the action that's triggered when a user taps a list item.
    4. Move the Navigate to Screen action into the field that says DRAG AN ACTION HERE.
    5. Choose Opportunities from the Screen menu and then click Save.
                                  

  1. 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. 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. 
  2. Drag Fixed Value into the Closein field and then enter 30.

    1. Click Finish and then click Save after you return to the Configure Action page.
  1. Repeat these steps for the 60d and 90d metrics by adding 30 and 60 in the Closein field.
That's done, so now let's look at mapping in the status meters
  1. In the Preview, select the NA Region tile.
  2. Click the Action tab in the Properties Inspector
  3. Click Add Action.
  4. Click Tap. 
  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.
  7. Open the Fixed Value category and then add a fixed value of NA to the Region field. 
  8. Click Finish and then Save.
  9. Repeat these steps for the rest of the status meter 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.


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.
  2. Click the Actions tab. 
  3. 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
  4. Choose Tap
  5. Choose Navigate to Screen and then pick Opportunity from the Screen list
  6. Click Navigation Data Mapper.
  7. If it's not already selected, click the Current Screen category.
  8. OID should be already mapped. 
    1. 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:



WELL DONE, we are finished.. Now to test 
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.
  2. Click Test on Phone.
  3. Click Build Test Application
  4. MAX generates the test QR code.
  5. Click the Show QR Code icon.
  6. 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.
  7. On your phone, click the MAX app icon to open the MAX App.
  8. In the MAX landing page, click Scan.( the big Plus sign)
    1. Aim the scanner at the test QR code.
      1. Log in with your test user name and password and have a run through the application. 




Creating an Application in Oracle Max - Part 4 Adding the Accounts Flow


Welcome to Part 4 where we give access to Accounts information

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 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.

  1. In the Properties Inspector for the Application Menu component, click Menu Item.
    1. Complete the Create Screen wizard as follows:
      1. In the Landing Screen page, choose Simple Screen and then click Next.
        1. Enter Accounts in the Screen Title screen and then click Next.
        2. In the Content screen, choose List and then click Next, Finish
        3. Click Accounts in the Preview. Then click Go to Screen in the Properties Inspector.

Now lets put some data in 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.
    1. Click the Add Data Quickstart.
    2. In the Layout page, choose Title, Subtitle.
    3. Choose Account as the business object.
    4. Map the Account 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.
      • We're not going to filter this data, so click Finish in the Query page.
    5. Back in the Designer, the Accounts list displays in the Preview showing mock data.

Now 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.
  1. Click Add a Detail Screen.
  2. Choose Simple Screen with Summary
  3. Enter Account in the Screen Title field and then click Next.
  4. Choose List and then click Next.
  5. Click Finish.
  6. Click Go to Detail Screen.
  1. Open the Components Palette and then select the Card Component.
  2. Drag the Card component into the Summary Panel in the Preview
  3. In the Properties Inspector, click the Properties tab
  4. In the Properties Inspector for the Card component, clear the Graphic and Detail Section options. Select the Subtitle 1, and Subtitle 2 options.
  1. Open the QuickStart menu, choose Add Data and then choose Account. Click Next.
    1. In the Data tab, map the fields as follows and then click Next.
    2. name->Title
    3. city,state,country,region->St1
    4. Website->St2  
  2. 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.

  1. Resize the summary pane:
    1. Double-click the Account screen header in the Preview.
    2. In the Properties Inspector, click Custom and then decrement the size to 100.
    3. Next, add data to the List component:
      1. Select the List component in the Preview or in the breadcrumbs trail
      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.
      4. In the Data Source page, click Opportunity.
  2. You'll see the mapped data when you change the Icon field type from a graphic to a status meter. You'll do that after you filter the data in the next step.
  3. 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.

  1. In the Preview, select the Icon field
  2. Change the icon field from an image to a status meter. The list data displays.
OK we are done adding screens and this blog post. 
In the next post we will cover off Navigation and Testing ! 


Creating an Application in Oracle Max - Part 3 Adding the Accounts Tab

In this step, you'll add a tab that displays some basic information about the account related to the selected opportunity
  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. 
  1. In the Preview, click the Accounts tab.
    1. Double-click Add Component in the Preview to open the Components Palette.
    2. Select the Form component in the Components Palette.
    3. Drag the Form component into the Preview.
  1. In the Properties Inspector, click QuickStarts and then click Add Data. Complete the Add Data QuickStart as follows:
  2. Choose Opportunity in the Select Data Source page and then click Next.In the Data page, first expand the account field. 
  1. 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

  1. Next, Next. In the Query page, click Finish. (You don't need to filter the returned data.) 
All done. Now let's add 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
  1. In the Preview, click the Notes tab.
  2. Double-click Add Component to open the Component Palette.
  3. Drag a list component into the lower pane of the Preview.
  4. The Properties Inspector for the List component should be open.
  5. Go into the Add Data, and the layout appears
  6. 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.
  1. In the Data Source page, choose the Opportunity Notes business object
  2. Map createdate to title, Comment to SubTitle, and username to Value1 
Click Next and Finish 
Now let's add the Create Note Screen. 
In this step, you'll create a form that enables users to jot down notes for a selected opportunity




  1. In the Preview, select the screen component by clicking the Opportunity header.In the Properties Inspector for the Screen component, click Header Buttons.
  2. In the Header Buttons panel, click Button. Enter Create Note in the Button Label field. 

  1. Click Action in the Properties Inspector.
  2.  Click Add Action.
  3. Choose Tap.
  4. Click Navigate to Field.

CLick Tap 
  1. Click Navigate to Screen.
  1. Put it in the DRAG AN ACTION HERE slot.
    1. Click Add
    2. In the Screen type page, pick Create and then click Next.
  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.
  4. Click Finish to return to the Action tab. 
  5. Click Navigation Data Mapper.

  1. From the Current Screen category (which should be open by default), drag oid into both of the Oid fields.
  2. 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.
  3. Click Go to Create Note.
  4. 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.
  5. 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.
  6. 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.
    2. Add some helpful text in the Hint field, like Type your comments here....
    3. Increase the number of rows to 10. 
    4. Open the Properties Inspector for the Comment field by either double clicking it in the Preview or by clicking Comment in the Properties Inspector.
    5. Choose Text Area as the screen type.
      1. Add some helpful text in the Hint field, like Type your comments here....
      2. Increase the number of rows to 10. 
  7. 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.
    2. Click Create Opportunity Notes. This is a custom action for the Opportunity Notes business object.

  1. 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.
Click Configure Business Action Parameters. 


Remove the string from Username
Expand the Application User category.
Drag User Name into the Username field to populate the screen with the name of the current 
app user.
Click Finish and then click Save after you return to the Configure Actions page.

Ok that's enough in this blog. In the next entry we will add the Accounts Screen Flow. 

Creating an Application in Oracle Max - Part 2 Adding the Opportunities screen


We are following on with the tutorial
http://www.oracle.com/webfolder/technetwork/tutorials/cloud/max_crm/max.html#overview

To add a new screen to your app:
  1. Click Application Screens in the left navbar.
    1. Click New Screen.
  2. Click New Screen.
  3. Choose Simple Screen. Click Next.
  4. Enter Opportunities as the screen title.
  5. Choose List. Click Next.
In the previous blog we've seen how to do a lot of this so we are just showing the summary screens. 




  1. Click Finish.

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.

Click the Quick Start button 


Click Data, then select Opportunity , then map the fields
Winpercent -> Icon
Desc -> Title
Salestage - > Subtitle
Revenue - > value1
Region -> Value 2

Looks like : when done 

Click next, then Finish 
  1. 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 status meter. To do this:
    1. Double-click the Icon field in the Preview.
    2. In the Properties Inspector, open the Field Type menu and then choose Status Meter.


Now lets' create the detail sub-panel for Opportunities 

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 no

  1. Open the List component in the Properties Inspector by clicking List in the Properties Inspector or in the breadcrumbs trail.
  1. Click QuickStarts, then Add a Detail Screen 
  1. Complete the Add a Detail Screen wizard as follows:
    1. Choose Screen with Top Tabs and Summary and then click Next.
    2. OEnter Opportunity as the screen name. Name the tabs Detail, Accounts and Notes. Click Next.
  1. 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, then Finish 
The Opportunity screen has a summary panel that displays key details about an opportunity. This panel which displays the win percentage as a status 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 status meter, add the Card component.
  1. In the Properties Inspector, click Go to Detail Screen
  2. Open the Components Palette by double-clicking the Add button in the Summary pane or the Components icon in the navbar.Select the Card component.

  1. Click the Properties tab in the Properties Inspector.
  2. You're going to need all of the fields in the card's Summary section, so select Subtitle 1 and Subtitle 2. (The Graphic and Title fields are selected by default.)
  3. Clear the Detail Section option, because you don't need these fields.
  1. To enable the win percent status meter to display within the summary pane, change the Graphic field type as follows:
    1. Click Graphic to open the properties tab.
    2. Choose Status Meter from the Field Type list. 
    3. Bind the Card component to data:
    4. Open the Properties Inspector for the Card component by selecting it in the Preview or from the breadcrumbs trail.
    5. 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.
  2. Map the fields as follows  : winpercent ->Graphic, desc->title, salesstage->sub1, revenue-> Sub 2


  1. 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.

    1. 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.
    1. In the Summary Size section of the Properties Inspector, click Custom

      1. In the Summary Size section of the Properties Inspector, click Custom
    2. Decrement the size to 100. 

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.
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.
  1. In the Data Source page, pick Opportunity and then click Next

    1. 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
  1. 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.


  1. 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. In the Properties Inspector for the Form component, click Fields
    1. Click Createdate to open the Properties Inspector for this field.
  2. Enter Created in the Field Label field.
  3. To make the date easier to read, choose Date Time as the field type.
    1. Repeat these steps to rename Expectedclose as Closing and change its field type to the Date Time format.
    2. 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
      1. Finally, reorder the fields by dragging and dropping them in place using the move function.
        1. 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:
    3. Finally lets fix up the Edit Details screen for an opportunity 
    4. The Edit Opportunity screen enables users to track their progress on a deal.
  4. Select the Form component by clicking Form in the breadcrumbs trail.Click QuickStarts if the QuickStarts panel is not already displayed in the Properties Inspector.
  5. Click Add Edit Screen, then Go to Edit Screen 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
  6. 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.
  7. In the Properties Inspector, click Fields. We will not be showing much here as you've done it all in the screens above : 
  8. Reorder the fields to match the Detail screen:
      1. Desc
      2. Revenue
      3. Winpercent
      4. Salesstage
      5. Expectedclose
      6. Region
      7. Products
  1. For the Desc field, enter Name in the Field Label field.
  2. Click Winpercent
  3. Choose Status Meter from the Field Type menu.
  4. Next, select SalesStage from the menu in the Properties Inspector.
  5. 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
  6. Select the Region field and then choose Select from the Field Type menu to create another list of items
  7. Rename the Expectedclose field as Closing and change its field type to Date Time
  8. For the Products field, change the field type to Text Area and expand the field to five rows.
OK thats enough of the Opportunities. LEts end this blog here and move on in the next and create the accounts tab 

Tuesday, October 25, 2016

Creating an Application in Oracle Max - Part 1 - Getting going with the Tutorial

Moving off Cordova and EBS briefly let's have a look at Oracle Max while we are waiting for instances be provisioned.

( what is Oracle MAX? ) Oracle Mobile application accelerator allows you to create a cross-platform (iOS and Android, phone and tablet) mobile app visually without coding using only a browser.

to steal someone else's saying "this is  primarily for business users. Indeed, let’s imagine the situation in your organization when you have a requirement for building some relatively simple mobile app, but IT staff is completely busy and cannot be involved?! Here Oracle MAX can help you!" -  thanks Emin Askerov for the quote from the blog. 

Here's a youtube video from Grant Ronald that talks about what Max is : 


Let's have a look at a tutorial to see how it all works

http://www.oracle.com/webfolder/technetwork/tutorials/cloud/max_crm/max.html#overview

Lets run through it.  Most of the below is verbatim through the tutorial so we can see how it all actually works in practice

First sign in to Oracle MCS Mobile Cloud Service using Chrome. Do Not Use IE or Firefox you will have problems down in the middle of the tutorial and it will be very frustrating.


For the purposes of this tutorial we will use the packaged CRM  service rather than any difficult MCS integrations we are doing in the rest of our blogs. Since this is a shared integration, the backend CRM service implementation is already uploaded, so we can proceed with our MAX Implementation.





Click Mobile Apps


  1. Click New Application.
  2. Name the app My CRM. Click Next.




Now Choose Simple Screen


Enter Dashboard as the screen title. Click Next.






From Custom,List, Form and Dashboard along the bottom, choose Dashboard, Next, then Create









We now have a mobile app. Doesn't do much yet though, lets add some stuff.
First lets lay out our Dashboard













In the Preview, select the Tile component (Tile 1) to open the Properties Inspector for Tile 1.
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.


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.


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

Choose a color to set off the tile within the dashboard:
  1. Click Background.
  2. Open the Background Color menu and pick a light, neutral color, like gray.

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 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.


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

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:

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.
Now that we've showed the basics lets speed up a little 
    1. n the Properties inspector, click Create New Tile.
    2. Choose 2x1 as the tile dimensions.
  1. Name this tile Revenue Potential by Region.
  2. Choose a light background color for the tile (like light blue). 
With the tile complete, you can add a Bar Graph:
  1. Drag a Bar Chart component into the tile.



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.
o format the graph, click Legend and Titles and then do the following:
  • Remove the legend by choosing None.
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. Uou'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.
o create the first gauge, drag the LED Gauge component from the Components Palette into the NA Region tile.

Add the remaining files as follows:
  1. Click Create New Tile.
  2. Click New Tile twice to create a total of three tiles.
  1. Name the tiles SA RegionAP 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.
  2. Set background color the tiles. For example, pick gray so that they all match (and complement the Opportunity Pipeline tile as well).
  3. 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.
When you're done, the dashboard should look something like this in the Preview:





Lets add some data

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


  1. Expand the menu in the Business Object field and then click Browse Service Catalog.
  2. Select the CRM service 
  1. 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.


  1. 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.
  1. 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.
  2. When you're done, the mapping should look like this



OK that's enough for the first screen; we'll jump out here . In our next blog we will look at adding the other screens.

  1. 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.



Repeat the above for the 60 and 90d metrics connecting the relevant data objects

when done it should look like





  1. Populate the bar graph:
    1. In the Preview, click the Bar Chart component.
  2. In the Properties Inspector for the Bar Chart component, click the Data tab.
  3. Open the Business Object menu and click Opportunity; the data mapper opens. 
Now, bar charts need an X axis, Y axis and a value  (series ) , so let's hook them in. 
Y axis=revenue, X axis = region, series=OID 


Should look like the above.  Click Finish. 

  1. 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.In the Data Mapper, drag countNA into the Value field.
  1. Click Finish.
  1. 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 ( where Thresholds are )  three times.
  1. Use the color picker to add red (minimum), yellow (medium), and green (maximum).
  2.  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.

Repeat the above for SA, AP and EU. Dont't forget to map in countSA, count AP and CountEU business objects correctly.
when done it should look like


Use the test >  sign in the top right hand corner to give it a run through.


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

Now we are done... first screen is wired up. Lets move onto the second one,  Opportunities