You are currently browsing the tag archive for the ‘Bootstrap’ tag.

As promised, I am posting a series of blogs related to the session I presented at eXtremeCRM 2014 on using external JScript resources with CRM. The first topic I want to tackle, is using the Bootstrap progress bar with percentage in CRM.

The business concept revolves around the fact that most sales people are looking for a quick way to identify what completion percentage each lead is at. While now you can achieve something similar using the Business Process Flows, the addition of the fields to each step, and the whole presentation in some cases might be taking too much real estate. Furthermore, with the progress bar you can present a more granular progression that you would normally do with Business Process Flows.

Read the rest of this entry »

Advertisements

With Dynamics CRM 2013 now we have even more opportunities to play with the UI. We have more choice with regards to layout, more choice with regards to user experience, and implicitly more opportunities to make it better for the user. But, once we start to analyze the user experience, we could find that we’re missing a lot by not being able to do everything we can do on a regular web page. Or, can we?

NOTE: some of the items presented in this post are not officially “supported”, and should only be used with that in mind.

A previous post was describing the proper way to use jQuery in the context of Dynamics CRM. See more details HERE.

In this post I’m going to be talking about Twitter Bootstrap, and how we can leverage it in the context of Dynamics CRM 2013. We want to add a progress bar to our Case form, to show graphically how far we are in resolving this case. It should look something like this:

image

First off, head to getbootstrap.com and download the files.

image

Extract the files, and you will get this structure:

image

Go in the css folder, and get the bootstrap.min.css file. also, from the js file get the bootstrap.min.js file. We will be using the min files for better performance.

Now, in your CRM environment, load these as web resources.

In addition, create a new JScript web resource that will hold our custom script. Let’s name this one new_bootstrap_case as we want to make our modifications on the Case form. The structure should look as follows:

image

Now, let’s add the following script to the OnLoad of the Case form:

function AddProgressBar() {
    // add the CSS reference

    var _css = "WebResources/new_bootstrap_css";
    var _cssref = document.createElement("link");
    _cssref.setAttribute("rel", "stylesheet");
    _cssref.setAttribute("type", "text/css");
    _cssref.setAttribute("href", _css);
    $("head").append(_cssref);

    // add the progress bar
    var _innerHTML = "";

    _innerHTML += "<div class=’progress progress-striped’ width=’100%’>";
    _innerHTML += "<div class=’progress-bar progress-bar-success’ role=’progressbar’ aria-valuenow=’40’ aria-valuemin=’0′ aria-valuemax=’100′ style=’width: 40%’>";
    _innerHTML += "<span class=’sr-only’>40% Complete (success)</span>";
    _innerHTML += "</div>";
    _innerHTML += "</div>";

    $("h2.ms-crm-Form").prepend(_innerHTML);
}

 

Basically, we are doing two things here:

In the first part, we are adding our CSS web resource to the page. This will help us with the rendering of the progress bar.

The second part of the function simply generates the HTML required to render the progress bar. In this example I am setting it to 40% by default, but you can define the value as needed based on your current business rules.

Your form properties will look as such when done:

image

Now, open a Case form, and find your new progress bar rendered as such:

image

Enjoy!

Check out my course [Video]

Dynamics 365 Customer Engagement Administration

Dynamics 365 Customer Engagement Administration

Check out my course [Video]

Configuring and Extending Dynamics 365 Customer Engagement

Configuring and Extending Dynamics 365 Customer Engagement

Check out my course [Video]

Getting Started with Dynamics 365 Customer Engagement

Reviewed Book

Implementing Microsoft Dynamics 365 for Finance and Operations

Implementing Microsoft Dynamics 365 for Finance and Operations

Reviewed Book

Microsoft Dynamics 365 Extensions Cookbook

Microsoft Dynamics 365 Extensions Cookbook

Check out my Book

Microsoft Dynamics CRM 2016 Customization - Second Edition

Microsoft Dynamics CRM 2016 Customization - Second Edition

Check out my Book

Microsoft Dynamics CRM Customization Essentials

Microsoft Dynamics CRM Customization Essentials

Check out my Book

Microsoft Dynamics CRM 2011 Scripting Cookbook

Microsoft Dynamics CRM 2011 Scripting Cookbook

Reviewed Book

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 607 other followers

Follow Dynamics 365 Wizardry on WordPress.com