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

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

4. 
   

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

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

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.
2. Name this tile Revenue Potential by Region.
3. 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 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.
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.
2. 

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

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