crminthefield: Microsoft Dynamics CRM 2013 CSS Style Reference using Browser Developer Tools

[Blog bot]

Источник: http://blogs.msdn.com/b/crminthefiel...per-tools.aspx
==============

Microsoft Dynamics CRM designers and developers may have noticed that a Style Guide for Microsoft Dynamics CRM 2013 was not released in the CRM 2013 SDK (Software Development Kit), though Style Guides were sometimes released in prior versions of the Dynamics CRM SDK. However, advancements in current versions of browser developer tools allow you to do many of the things the Style Guides gave you help with... and more!

Developers want to have reusable CSS files (Cascading Style Sheets) that they can reference to achieve the same look and feel as our application. The product does not provide these resources. We also do not support referencing the CSS files used in our application, because these files can change without notice via Update Rollup or Service Pack installations, or major version upgrades, and affect the UI of anyone referencing (reusing) them.

Here we describe a technique which allows you to create a reference page which includes copies of CSS files used in the application. You can then create your own CSS web resources and use them in your custom UI. The goal is that your UI has no dependencies on resources in the application. So, when things in the application change, your UI (User Interface) will not be affected.

If you have access to the application, getting examples of our styles is rather straight forward using the Microsoft Windows Internet Explorer F12 Developer Tools or similar developer tools associated with supported versions of other browsers supported by Microsoft Dynamics CRM, including Google Chrome, Mozilla Firefox, and Apple Safari:

1. Select the UI element that you want to emulate using an HTML web resource; for example, let’s consider a lookup dialog:




2. Press F12 and open your supported browser's Developer Tools (Here, we're using the Internet Explorer 10 Developer Tools)
3. Using the HTML tab, select the element and choose View > Source > Element source with style:



For this particular control, you may need to drill down into the body element of the iFrame

• This will open a page that captures all the styles and HTML elements within the selected part of the page
• You can save this file and view it in your browser:

This gives you some detail about the styles used in Microsoft Dynamic CRM 2013. Consider it a starting point for creating a web resource with the same look and feel as the Dynamics CRM 2013 UI.

Important suggestions:

• Do a global find / replace, changing every instance of ‘ms-crm-‘ to ‘my-sdk-‘ (for example; you should use your own naming convention)
  • Then examine the CSS and look for each of the images
    • If you have Microsoft Dynamics CRM 2013 on-premises, you should be able find the images
    • We also release them via the Dynamics CRM 2013 SDK (Software Development Kit) in the folder SDK\Resources\Images
• Do not reference the images on the server
  • Instead, create image web resources that can be referenced by your pages and your CSS web resources
• You even get some of the scripts used in the page
  • But remember: You should not reference CRM Script files or functions in your web resources
  • Use these to get tips to write your own scripts to make your custom pages work
  • These scripts won’t give you a fully functioning grid control
  • However, they are useful if you want to create such a control or adapt an existing 3rd party control to share the same look and feel

As long as you separate your HTML web resources from any part of the CRM application, there is nothing within these suggestions that is not supportable:

• If the Dynamics CRM Product Group changes Dynamics CRM 2013 CSS, images, or other areas in the application, your HTML web resources will still function
• We are not providing CSS or other resources for you to reuse so that your HTML web resources respond to our changes
  • Therefore, you will still need to maintain them when the application changes

Please let us know what you think of this technique and what other information you need to create user interface elements that blend in well with the Microsoft Dynamics CRM UI.

Enjoy!

Greg Nichols
Senior Premier Field Engineer
Microsoft Corporation







Источник: http://blogs.msdn.com/b/crminthefiel...per-tools.aspx