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

Continuing with THIS series of posts, today we are looking at using the Flot JScript library for visual rendering of data. Flot is a great little library for charting. It is available from HERE.

The Flot library has a few graphing variations available, and we can easily change the CSS as needed to make it look even more appealing. The idea is that presenting information visually will make our users so much faster, and more inclined to quickly glance to see what’s going on, rather than deep dive.

In this short article we focus on the Flot pie charts. What we will achieve is this:

image

Notice how, for the purpose of this demo, I have left the available rendering option buttons on the form. You can change the rendering type as needed, until you figure out which is the best to use. I like to do that with customers because giving them choice empowers them and engages them in the discussion.
Read the rest of this entry »

Keeping in line with a previous article about using the Bootstrap library with Dynamics CRM, in this article we will look at using another JScript library.

This mini-series of articles relates to the topic I’ve presented at eXtreme CRM this year. It all revolves around visual presentation at the record level. While Dashboards are nice, humans are “visual animals”, and as such, presenting information visually at the record level is not only eye-candy, but also can make a user of the system more productive, and more eager to adopt a new tool.

The previous articles in this mini-series are:

HTML Web Resource in Dynamics CRM

HTML Web Resource in Dynamics CRM [2]

Bootstrap Progress Bar in CRM

We’re going to be looking now at Easy Pie Chart. There are two reasons I like this library. First off, it is very light. Second, I like the animation. Makes it more “look here first” like. I’ll be using it as is, with no visual customizations, but if you want, feel free to tinker with the CSS.
Read the rest of this entry »

This post is just an introduction to a set of posts detailing how we can start taking advantage of HTML5 and some open source JavaScript libraries and frameworks within Dynamics CRM.

In this first post, we’ll be looking at getting to the most basic information from within a HTML Web Resource. Of course, knowledge of JavaScript and some basic CSS is required :)

For the sake of this example, and to keep things simple and easy to read, the script and the CSS are all built in the same file. Normally you would create a structure of 3 separate files, a HTML file, a JavaScript file and CSS file.

Start by creating a new HTML web resource. Place it in a iFrame on the Account entity.

The following code is commented to be self-explanatory, and is only meant to serve as a reference. Some of these calls will be used in future articles when we start looking at providing some real functionality on our records.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Context Info</title>
        <style type="text/css">
            body {
                background-color: #b0c4de;
            }

        </style>
    </head>
    <body>
        <script type="text/javascript">
            // debugger;
            var xrm = window.parent.Xrm;

            // Display the client information
            // Web for Browser
            // Outlook for Outlook
            // Mobile for Mobile
            var _client = xrm.Page.context.client.getClient();
            document.write("Client: " + _client + "<br />");

            // Get the client’s URL
             var _clientURL = xrm.Page.context.getClientUrl();
             document.write("Client URL: " + _clientURL + "<br />");

            // Get the current theme
            // for Outlook
            // returns the following values:
            // Default for Web
            // Office12Blue for Microsoft Dynamics CRM for Outlook 2007 or 2010 Blue Theme
            // Office14Silver for Microsoft Dynamics CRM for Outlook 2007 or 2010 Silver or Black Theme
            var _clientTheme = xrm.Page.context.getCurrentTheme();
            document.write("Client Theme: " + _clientTheme + "<br />");

            // Get the base language
            var _baseLanguage = xrm.Page.context.getOrgLcid();
            document.write("Base Language: " + _baseLanguage + "<br />");

            // Get the Organization Unique Name
            var _orgUniqueName = xrm.Page.context.getOrgUniqueName();
            document.write("Organization Unique Name: " + _orgUniqueName + "<br />");

            // Get the current User ID
            var _userID = xrm.Page.context.getUserId();
            document.write("User ID: " + _userID + "<br />");

            // Get the User Language
            var _userLanguage = xrm.Page.context.getUserLcid();
            document.write("User Language: " + _userLanguage + "<br />");

            // Get the User Name
            var _userName = xrm.Page.context.getUserName();
            document.write("User Name: " + _userName + "<br />");

            // Get the User Roles IDs
            var _userRoles = xrm.Page.context.getUserRoles();
            document.write("User Roles: ");
            for (var i = 0; i < _userRoles.length; i++) {
                document.write(_userRoles[i].toString() + ", ");
            }
            document.write("<br />");

            document.write("Window size: " + this.innerWidth + ", " + this.innerHeight + "<br />");

            document.write("Working with record data: " + "<br />");

            // debugger;

            // Get a reference to the entity
            var _entity = xrm.Page.data.entity;

            // Get the entity name
            var _entityName = _entity.getEntityName();
            document.write("Entity Name: " + _entityName + "<br />");

            // Get the entity ID
            var _entityID = _entity.getId();
            document.write("Entity ID: " + _entityID + "<br />");

        </script>
    </body>
</html>

The output when opening a new Account form should be as follows:

image

On an existing record you will also get the Entity ID.

Now with all this information, we can start building something more interesting. Future posts will go into retrieving related data, and building some other functionality with it. So, stay tuned :)

Enjoy!

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!

While often times the values of a sub-grid can be defined only through the grid settings, you will find that there are situations where you want the grid to display a set of custom results. You can control the results selection/filtering using FetchXML, and here’s how to do it:

First off, I have a function that triggers on page load. It looks like this:

function PopulateRecentCaseSubGrid() {
    var ruleConditionID = Xrm.Page.data.entity.getId(); //Get Rule ID  
    var ruleConditionName = Xrm.Page.getAttribute("new_name").getValue();
    if (ruleConditionID != null) {
        var guid = ruleConditionID.substring(1, ruleConditionID.length – 1);
        var fetchXml = "<fetch version=’1.0′ output-format=’xml-platform’ mapping=’logical’ distinct=’false’>" +
                       "<entity name=’incident’>" +
                       "<attribute name=’title’ />" +
                       "<attribute name=’ticketnumber’ />" +
                       "<attribute name=’casetypecode’ />" +
                       "<attribute name=’statecode’ />" +
                       "<attribute name=’new_project’ />" +
                       "<attribute name=’ownerid’ />" +
                       "<attribute name=’incidentid’ />" +
                       "<order attribute=’title’ descending=’false’ />" +
                       "<filter type=’and’>" +
                        "<filter type=’or’>" +
                         "<condition attribute=’new_rule_condition1′ operator=’eq’ uiname=’" + ruleConditionName + "’ uitype=’new_rulecondition’ value=’" + guid + "’ />" +
                         "<condition attribute=’new_rule_condition2′ operator=’eq’ uiname=’" + ruleConditionName + "’ uitype=’new_rulecondition’ value=’" + guid + "’ />" +
                         "<condition attribute=’new_rule_condition3′ operator=’eq’ uiname=’" + ruleConditionName + "’ uitype=’new_rulecondition’ value=’" + guid + "’ />" +
                         "<condition attribute=’new_rule_condition4′ operator=’eq’ uiname=’" + ruleConditionName + "’ uitype=’new_rulecondition’ value=’" + guid + "’ />" +
                         "<condition attribute=’new_rule_condition5′ operator=’eq’ uiname=’" + ruleConditionName + "’ uitype=’new_rulecondition’ value=’" + guid + "’ />" +
                        "</filter>" +
                       "</filter>" +
                       "</entity>" +
                       "</fetch>";

        setTimeout(function () {
            PopulateGridFetchXML(‘Compliance_Cases’, fetchXml);
        }, 5000)

    }
}

 

This defines the FetchXML with all the required filters, and calls another function called PopulateGridFetchXML.

function PopulateGridFetchXML(subGridName, fetchXML) {

    try {

        var subGrid = document.getElementById(subGridName);
        subGrid.control.SetParameter("fetchXml", fetchXML);
        subGrid.control.refresh();

    } catch (err) {
        alert(err.message);
    }
}

Our PopulateGridFetchXML function takes in the name of the sub-grid we want to refresh, along with the fetch query. It simply sets the FetchXML parameter to the grid, and calls a refresh on it.

You can build your FetchXML using advanced find or manually.

Enjoy!

MVP Reconnect

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

Join 617 other followers

Follow Dynamics 365 Wizardry on WordPress.com