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.
3. Click New Screen.
4. Choose Simple Screen. Click Next.
5. Enter Opportunities as the screen title.
6. 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 
2. 

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

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. 
   

1. 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
   2. 
      
      1. In the Summary Size section of the Properties Inspector, click Custom
   3. Decrement the size to 100. 
   4. 
      

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
2. 
   
   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.
3. Enter Created in the Field Label field.
4. 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. 
4. Finally lets fix up the Edit Details screen for an opportunity 
5. The Edit Opportunity screen enables users to track their progress on a deal.
6. 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.
7. 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
8. 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.
9. In the Properties Inspector, click Fields. We will not be showing much here as you've done it all in the screens above : 
10. 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.
9. 

OK thats enough of the Opportunities. LEts end this blog here and move on in the next and create the accounts tab