I have written about the Client 360 component before. This solution was built by one of my colleagues Paul Mare so all credit goes to him!

Those of you familiar with the existing Financial Services templates will recognise this component already as I embeded it into FinDemo.

We are now making these solutions available as separate install files files. This solution comes pre configures on the Financial Services templates on demobuilder. http://demobuilder.cloudapp.net/

Introduction

The Client360 Single View Configurator is a demo asset that allows pre-sales people to establish a rich user experience inside a standard CRM Form, without requiring any JavaScript, HTML 5 or CSS coding. This is made available to be freely used or modified by anybody, at their own risk. Specifically note that this is a demo asset and not suited for production.
It is typically used to add the following items to a CRM Account or Contact Form:

  • • A tile-based display of related records like Opportunities or Cases
  • • A tile-based display of the customer’s portfolio of business, like Fund Holdings, Product Holdings, Bank Accounts, Installed Base or Projects
  • • Guidance / Best Next Actions – a list of recommended Best Next Actions and contextual guidance for the user
  • • Quick Buttons – touch friendly buttons that can be quickly configured to perform related actions

An example of such a customized form could be:

sv1

Note the following elements on this sample:
1. Three horizontal tabs, each indicated by a heading followed by a record count. A quick glance shows that apart from the 5 Opportunities, there are 6 Cases logged and Contoso Inc has 3 Subsidiaries.
2. The Guidance: Best Next Actions area shows up to 7 messages for the User.
3. The Quick Buttons area with up to 4 buttons that will perform related actions from this Company record.
Note that each tile has the following information components:

  • • An Icon, in this case based on the Probability of the Opportunity.
  • • A Color, in this case determined by the Status Reason of the Opportunity.
  • • Three Zones with information next to the icon (referred to as Zone 1, Zone 2 and Zone 3), in this case showing the Opportunity Estimated Value, Estimated Close Date and Status Reason.
  • • A Title area, in this case showing the Name of the Opportunity.

To accomplish this, do the following, assuming that the Client360 Single View solutions have been installed already:

  • • Edit the Form for the Account or Contact record where the rich user experience is needed.
  • • Add the ms_SingleViewDisplay.html web resource to the form. Save and publish your customisations.
  • • Edit the Single View Settings record for the Account or Contact form. Configure the Tile-based display, Quick Buttons and Guidance / Best Next Actions settings. Save and test by opening the Form for an Account or Contact entity.

An example of the settings used to define the tile layout for Opportunities (as shown on the previous page):

sv2

Installing Client360 Solutions

Import the latest versions of the managed solutions for:
Client360 Single View Configurator –
Client360 Single View Icon Library –

** Update** For the latest Client360 files please download the 4 Client360 files from the primary FinDemo page.

If it is the very first time you are installing the solution, also do the following:

• Visit the Configuration page for the Client360 Single View Icon Library to see the available Icons.
• Visit the Configuration Page for the Client360 Single View Configurator to see breaking documentation, and more importantly, to create default Single View Settings records to get you started easily.

Adding Client360 to a Form

  1. Create or edit a form (via Solutions or Customisations)
  2. Insert Web Resource: ms_SingleViewDisplay.html
    1. Custom Parameter: name of the Singleview Setting (under General, see above)
    2. Formatting: One column
    3. Number of rows 18
    4. Scrolling: Never
    5. Display border: no

Tab Definition

Complete the relevant fields below for each of the 4 horizontal tabs to define the tab content and layout:

  • Name: The heading to be displayed for this tab.
  • Content: Select Tiles for a tile-based user experience, CRM Web Resource to display a custom web resource like an image or html file, or Not Used if the tab should not be rendered. The current version does not yet support CRM Charts.
  • Name: The heading to be displayed for this tab.
  • Content: Select Tiles for a tile-based user experience, CRM Web Resource to display a custom web resource like an image or html file, or Not Used if the tab should not be rendered. The current version does not yet support CRM Charts
  • Tile Layout: Select Small or Medium to determine the Tile size. The values Large, Case Process and Opportunity Process are not yet implemented.
  • URL: The relative URL of the web resource to display (only relevant if Content set to Web Resource.
  • Entity: The name for the Entity to be rendered in the tab, using the ODATA format, e.g. OpportunitySet or new_customentitySet, case-sensitive!

Tile Definition

To define the records that will be rendered on the tiles, enter the following information:

  • Primary Key: The field containing the Guid for the Entity above, listed in the CRM field list with the data type Primary Key, e.g. OpportunityId.
  • Foreign Key: The field on this Entity containing the relationship back to the entity on which the Single View will be rendered (typically the Account or Contact record), e.g. ParentContactId.
  • Filter: Select whether to include all Child Records or Active Child Records; for advanced scenarios select Child Records + Custom Filter, Active Child Records + Custom Filter or Custom Filter Only. Use in conjunction with the Custom Filter field below.
  • Custom Filter: ODATA filter expression for this entity, e.g. StateCode/Value eq 0 or startswith(Name,”W”)
  • Zone1-3,Title: The name for the field on the Entity to be rendered on the Tile, using the ODATA format, e.g. CloseProbability or new_MyField, case sensitive! The correct spelling is displayed in the second column (Schema Name) when looking at the field list for the Entity in a solution.
  • Zone1-3,Title Formatters: Specifies how the raw data returned from the ODATA service should be processed before display on the Tiles. Use None for simple text fields. Match Currency,Date and Option Set field types. Use Custom Javascript Function to format the fields using your own Javascript handler.
  • Additional Fields: Fields to be retrieved and made available to Custom Javascript handlers.

Guidance / Bext Next Actions

Enter the text to display on the Single View form. Use replacement values
for dynamic content, e.g.:

» &Cnt1: Count of the number of records in horizontal tab 1

» &Cnt2: Count of the number of records in horizontal tab 2

» &Cnt3: Count of the number of records in horizontal tab 3

» &Cnt4: Count of the number of records in horizontal tab 4

» &RandomWord1: Random phrase from Random List 1

» &RandomWord2: Random phrase from Random List 2

Quick Buttons

For each Quick Button, enter the following information:

»Name: The name to be displayed on the form

»Action: What should happen when the button is clicked or touched

»Entity: The entity on which the button action will be performed

»Foreign Key: The Odata name for the field pointing to the current entity

»Primary Key: The Odata field name for the field containg the primary key (record Guid)

Setting Color With A Custom Function

When selecting Custom JavaScript Function as the Color source, you need to implement a Javascript function on the form that returns the CSS color name or color value. It must have the name and calling interface as per the example below:

function determineCustomColor(record, entityLogicalName) {        // Return green for Open opportunities, gray for Won or Lost        if (entityLogicalName == “opportunity”) {            return (record.StatusCode.Value == 0) ? “DarkGreen” : “#777777”;        }    }

The input parameter record is a Javascript object. Each of the fields retrieved according to the tab’s tile definition is a property of this object, e.g. record.Name, record.CloseProbability or records.StatusCode. Option Sets, Currency Fields and Lookup fields are objects in their own right, use notation like record.ParentContactId.Name or record.StatusCode.Value.

The input parameter entityLogicalName is a string containing the logical name for the entity, e.g. opportunity or incident.

Setting The Icon With A Custom Function

When selecting Custom JavaScript Function as the Icon source, you need to implement a Javascript function on the form that returns the Icon name. It must have the name and calling interface as per the example below:

function determineCustomIcon(record, entityLogicalName) {        // Return a flag icon based on Address 1 Country        if (entityLogicalName == “account”) {            switch (record.Address1_Country) {               case “United States:               case “United States”: return “Flags/” + “UnitedStates.png”;               case “United Kingdom”: return “Flags/” + “UnitedKingdom.png”;               case “Germany”: return “Flags/” + “Germany.png”;               default: return “Temp.png”;            }        }    }

The input parameters are the same as for the determineCustomColor function on the left.

Using A Custom Javascript Formatter

When selecting Custom JavaScript Function as the Formatter, you need to implement a Javascript function on the form that returns the text to be rendered on the tile. It must have the name and calling interface as per the example below:

function determineCustomFormat(record, entityLogicalName, field) {        // Analyse record and return text to display on tile        if (entityLogicalName == “opportunity” && field = “StatusCode”) {            return (record.StatusCode.Value == 0) ? “Active” : “Inactive”;        }    }

The input parameter record is a Javascript object. Each of the fields retrieved according to the tab’s tile definition is a property of this object, e.g. record.Name, record.CloseProbability or records.StatusCode. Option Sets, Currency Fields and Lookup fields are objects in their own right, use notation like record.ParentContactId.Name or record.StatusCode.Value.

The input parameter entityLogicalName is a string containing the logical name for the entity, e.g. opportunity or incident.

The input parameter field is a string containing the name of the field being formatted, e.g. StatusCode or Name.

EXAMPLE

The sample below introduces line breaks into Product Names for the “fin_policy” entity, and for the “fin_claim” entity shows the product name followed by two line breaks and then the status description in curly brackets:

function determineCustomFormat(record, entityLogicalName, field) {    // alert(entityLogicalName + “/” + field + “: ” + record[field]);    switch (entityLogicalName + “/” + field) {      case “fin_policy/fin_ProductId”: {        var t = record.fin_ProductId.Name           + “<br /><br />{” + record.fin_BrokerId.Name + “}”;        t = t.replace(“Scooter Insurance”, “Scooter<br />Insurance”);         t = t.replace(“Pension Saver”, “Pension<:br />Saver”);         t = t.replace(“Van Insurance”, “Van<br />Insurance”);        return t;      }      case “fin_claim/fin_ClaimStatus”: {         var t = “Logged”;         switch (record[field].Value) {             case 914950000: t = “In Progress”; break;             case 914950001: t = “Partially Accepted”; break;             case 914950002: t = “Fully Accepted”; break;             case 914950003: t = “Rejected”; break;         }         return record.fin_ProductId.Name + “<br /><br />{” + t + “}”;      }      default:         return record[field];    } // switch }

The input parameters are the same as for the determineCustomColor function on the left.

This post was originally published on https://markmargolis.wordpress.com.

This posting is provided “AS IS” with no warranties, and confers no rights.