Customizing the UI

CRM has multiple out-of-the-box UIs:

• Web - browser based

• Mobile - browser based

• Mobile - rich client

• Outlook - desktop

The approach to customizing the UI depends on which UI you are customizing. Our focus is on customizing the web based UI. Advanced customization of CRM's web UI typically involves Web Resources. You can customize the UI using configuration approaches that are amply described elsewhere, e.g. forms, business logic, workflows and commandbars.

Web resources are resources such as javascript, css, html, images (png, jpg), xml files and json files available to web programs through standard http protocols. While web resources mostly come through the dynamics CRM web site, and hence the same "origin", you can also load web resources from other domains served up from other web servers. However, it is more typical to load web resources from the CRM server deployed using using Solutions.

CRM Web Resources can be written in any language that targets javascript. Typescript, a popular statically typed web framework, compiles to javascript and can be used to author web resources as long as they are transpiled to javascript before being loaded into CRM. Like any web app, CRM itself uses a large number of javascript libraries, for example, CRM uses jquery. The Xrm global object has several libraries behind it in order to provide the Xrm capabilities such as the excecution context (Xrm.context) or the Form context (Xrm.Pgae.[data.entity]). Office online also provides a web based API and that can be pulled into the CRM application as well.

A few areas need to be covered to describe how to create and deploy UI customizations. We are going to take the view that we want to use non-Visual Studio based tools to develop the advanced customizations. We will describe the use of tools that are common in general web application development.

• Developing Web Resources

  • Loading Web Resources

  • Building Blocks

    • Editors

    • Web frameworks such as React, Redux, etc.

    • Build tools

  • Compile-edit-debug cycle

    • Hot reload

• Deploying Web Resources

  • Manual deployment

    • CRM UI

    • XrmToolBox

  • Bundling Web Resources into Solutions