RapidStart CRM Design Standards

You may notice that the Account and Contact forms, for example, look very similar in their layout and presentation. This should be a model for any new forms that are designed.

In addition, “Show Navigation items” should be unchecked on the Display tab of the Form Properties.

All form Tab labels should be Upper Case with a relevant emoji, and all form Section labels should be Proper Case, also with a relevant emoji when appropriate. (See Iconography below) Example RapidStart CRM Account form shown:

Nothing should be added to the sitemaps that does not require direct access by the intended users.

Any new entity created should have a quick create form created, and the ribbon should be modified to use that quick create form for all new record creation. In addition you should add to the relationships so relevant data is automatically added when the quick create form is launched to save user steps.

How to enforce use of Quick Create in RapidStart CRM

Enforcing use of Quick Create is critical to consistency in RapidStart CRM and is accomplished by adding a snippet of existing JavaScript to the new entity ribbon buttons.

Ribbon Workbench can be installed in the customer tenant or accessed from within XrmToolBox

After that, create an unmanaged solution called “??ribbon”, and add the custom entities to it with no assets other than metadata. Select “No” to any prompts to add required components. You can add about 4 custom entities at a time, if you need more then you will need to remove these after modifications and add the other ones to the solution and modify those. You should not add the Application Ribbon (dangerous), but you should add the Account entity so you can copy and paste modifications we made to the buttons as well as the custom Command and Display rule.

Any “+ New” button, whether on Home, Subgrid or Form should have this modification.

Easiest steps are to create Display Rule first, then Create Command, then modify each “+ New” button to use the new command.

Example of Display Rule:

Example of Command:

Example of Button modification

An area that presents confusion for customers, are too many commands in the ribbon. By default, when a new entity is created, it gets the same full list of commands, many of which are not relevant to the purpose of the entity and it simply confuses users. RapidStart CRM has hidden many of these superfluous commands for the existing entities in RapidStart CRM. This process should also be performed on any new custom entities.

Ribbon Minimization

Again, using Ribbon Workbench and your custom solution, you can replicate all of the same Hide Actions that are found on the Account entity, including the Form, Homepage grid and Subgrid. This is accomplished by right-clicking a button in the ribbon and selecting “Hide”. Example shown below:

Quick Steps buttons on parent records should be considered wherever appropriate. This can save your users from having to hunt for it.

Adding Quick Steps Buttons

Quick steps buttons can be used to launch the quick create form for a related entity without having to navigate to the subgrid or entity. It can also be used to launch a classic workflow. It is a custom Control. You can add more buttons to existing controls or add a control to the form of a new entity.

Webresource for add new record

The first step is to create a new webresource, by copying the javascript from an existing one, for example: QS_Add_Opp.js webresource, below is the code for that:

{
“labels”: {
“Default”: “Add Opportunity”,
“1033”: “Add Opportunity”,
“1031”: “Gelegenheit hinzufügen”,
“1035”: “Lisää mahdollisuus”,
“1036”: “Ajouter une opportunité”,
“1040”: “Aggiungi opportunità”,
“1043”: “Kans toevoegen”,
“1044”: “Legg til mulighet”,
“1049”: “Добавить возможность”,
“1053”: “Lägg till möjlighet”,
“3082”: “Agregar oportunidad”,
“1025”: “أضف فرصة”,
“1041”: “機会を追加する”,
“1046”: “Adicionar oportunidade”
},
“entity”: “fw_opportunity”,
“quickForm”: true,
“background”: “#7EBA02”,
“icon”: “Bullseye”
}

You will only need the languages that are relevant to the customer, the rest can be removed (for ISVs you may want to add all languages for markets you serve). Select a hex color that would be appropriate for the button background, making sure white text will be readable against it and avoiding really bright colors, and colors already used in adjacent buttons on the form. This control uses Fluent UI icons, so for a relevant Icon go to https://developer.microsoft.com/en-us/fluentui#/styles/web/icons and get the name of an appropriate icon. Make sure you use correct prefix for entity from your webresource. In the example above the name of the icon was “bullseye”.

Webresource for workflow launch

For a Quick Step to launch a classic workflow, see the following example of the Convert Prospect workflow, QS_Convert_Prospect.js:

{
“labels”: {
“Default”: “Convert Prospect”,
“1033”: “Convert Prospect”,
“1031”: “Prospekt konvertieren”,
“1035”: “Muunna prospekti”,
“1036”: “Convertir un prospect”,
“1040”: “Converti potenziale cliente”,
“1043”: “Converteren Prospect”,
“1044”: “Konverter Prospect”,
“1049”: “Конвертировать интерес”,
“1053”: “Konvertera Prospect”,
“3082”: “Convertir cliente potencial”,
“1025”: “تحويل العميل المحتمل”,
“1041”: “見込み客を変換する”,
“1046”: “Prospecto de conversão”
},
“workflowId”: “2479700F-0CBC-4FE7-BCAF-7799CCAB177C”,
“reloadOnCompletion”: true,
“background”: “#FFB901”,
“icon”: “ReminderPerson”
}

Steps for this script will be similar to the previous one, except for instead of entity name, we will need the workflowId. This can be found within the url of the process while editing it, see below. It will be the second GUID, between %7b and %7d

Button

With the webresource now created and published we can move to the button. To add a button to an existing control, open the form in the form designer and open the Main form and double-click on the field and go to the controls tab. Note that a control can hold up to four buttons. If more are needed you can add another control, details below. Scroll down to the next available button and click edit:

All that we need to do here is add the webresource name as shown below. Make sure you use correct prefix for your webresource.

To create a new Quick Steps control on a form for a new entity, in the form designer create a new section and label it 🚀 Quick Steps. Place this section so that its position is consistent with that of other RapidStart CRM entity forms.

Create a new text field called Quickstepsplaceholder, and drag it into the section. Then double-click the field, and on the Display tab, uncheck “Display Label on the form”, then go to the controls tab and click add control, scroll to “Quick Buttons Control” and click Add. Tick the box to Hide the Default control, select all three modes (Web, Phone, Tablet) for defaults, edit the Type and Size by selecting the default option that pops up, and enter the webresource name in the configuration of button field, the same as we did in the previous exercise. Publish and test. See example below:

Part of what makes RapidStart CRM feel intuitive is the extensive use of emojis and icons on almost every single field that is visible.

Emojis and Icons are a very important part of the simple concept that is core to RapidStart CRM. Every visible field should have an Emoji, and every entity should have a custom icon (which will appear in the sitemap instead of the puzzle piece).

Label Emojis

Emojis can be added to any label in the platform. Go to https://emojipedia.org/ to find and copy an appropriate Emoji for your field. You can also copy and paste any existing emoji used in RapidStart CRM for a similar field, like dates. You literally copy-and-paste the emoji into the Label field before the text, see below:

If you created your fields before placing them on your form this will carry over, if you did not, you may need to go back to your form and add the emojis to the form labels.

Entity Icons

The puzzle piece in a sitemap is unprofessional and should be replaced. This requires a black and white SVG icon file. These can be found many places online like https://www.flaticon.com/ for example, or just doing an image search. Find an icon that represents the purpose of the entity.

Open the entity, and click on Update Icons, and then click Unified Interface tab of dialog that opens

Click the Search box, scroll to Load More, and then click on New

In the dialog that opens give the webresource a name “????_icon.svg”, copy that name into the Display name field. Select type as Vector format (SVG), ignore language, then “Choose File” to upload your svg icon. When done, publish and select this as your entity icon.

There are a few controls that should be consistently used. For example, Boolean fields should usually use the “toggle” control instead of the default checkbox. We also want to help our users with Tips or Alerts where necessary, see below.

Misc Controls

Alerts and Tips. We should not assume that the user will understand the modifications that were made, so where necessary we can add Tips to guide them or Alerts to warn them.

Example of a Tip:

Example of Alert:

Both Tips and Alerts are created with a placeholder field on the form similar to the Quick Steps control. Create a new text field called ??alert or ??tip, and drag it into the section where it should appear. Then double-click the field, and on the Display tab, uncheck “Display Label on the form”, then go to the controls tab and click add control, scroll to “SimpleTxtControl” click Add. Tick the box to Hide the Default control, select all three modes (Web, Phone, Tablet) for defaults.

In the control you can add the tip or alert text preceded by either the 💡 emoji for tips, or the ❗ emoji for Alerts. Then scroll down to the Text Style field and for alerts enter:  color:red , for tips enter: color:cadetblue

The RapidStart Settings app is designed for, and visible to, System Administrators or Power Users to be able to do some administrative things without having to leave RapidStart CRM. Where appropriate, this should be used for your solution’s administrative items.

Note: If you create any custom security roles, prefix them with “RapidStart” so they will appear in our role selector.

User documentation for your solution can be provided in-app to save the user from having to go find it on your website. An easy way to do this is the way we have handled it for RapidStart CRM, by providing a Dashboard with a full size iframe to our documentation site.

If your plan is to create a RapidStart CRM addon for listing in our catalog and/or AppSource you should follow these steps.

1. Start by creating an unmanaged solution in the environment where you have installed RapidStart CRM from AppSource.
2. Add the following components to your solution, the RapidStart CRM model-driven app, and any other apps you plan to extend, RapidStart Settings for example. Also add any of the existing forms or fields or other components you intend to work with.
3. Build away, following the design guidance above.
4. When you are satisfied with your results, export your solution as “Managed”. To test, create a new trial environment and install RapidStart CRM again from AppSource, then install your managed solution from the import on the solutions page.
5. You can publish your solution on AppSource following Microsoft’s guidance.
6. Let us know when you are ready and we will install your app on our test environment. If it installs successfully, we will add it to our “Tested Addons” catalog page.