Dynamics 365 Portals – Set & use cookies

By Ritchey Hazeu (Dynamics 365 Consultant @ Capgemini)

 

Do you want to let users fill in data in the Portal and use this data later in other fields of a WebForm or EntityForm? We can use Cookies to help us achieving this.

In this example we give the customer the opportunity to send in multiple cases. After completing the first case we don’t want them to fill in every field again. We can use Cookies to store information from the first case and use that in the next cases. Let’s start!

 

1. Create a Webform with Contact information page.

 

2. In CRM, navigate to the Contact Information page by going to Portals -> Webforms -> Webform Steps.

 

 

3. Scroll down to the ‘Custom Javascript’ section.

 

Here we fill in the code to store the Cookie for this particular page. In this example we will only store 3 items.

This is the code I’m using:

$(document).ready(function () {
$( "#NextButton" ).click(function() {
console.log("clicked next -> Cookie stored");
document.cookie = "firstname=" + document.getElementById("new_voornaam").value;
document.cookie = "lastName=" + document.getElementById("new_achternaam").value;
document.cookie = "street=" + document.getElementById("new_straat").value;
});
});

 

4. After you submitted the code, you can check if the cookies are being stored.

In Chrome you can use the console by clicking on F12, go to application and then to cookies. It should look like this:

 

 

5. Now the cookies are being stored, we want to use them on other places.

Remember that, in this example, we want to give the customer the possibility to enter multiple cases. On the last page of the Webform we can redirect them to a new case. It’s important to refer to the existing WebPage.

 

 

And besides this you have to fill in the Redirect Webform step at ‘Next step’ at the last page.

 

 

6. We have set the cookies, now we are going to get the cookies.

We can add the new code to the existing code, because we are using it on the same form. If you want to use the data on other forms you have to place the getCookie function on a different page than the setCookie function. The new code will look like this:


function getCookie(name)
{
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}

var firstname = getCookie("firstname");
var lastName = getCookie("lastName");
var street = getCookie("street");

$(document).ready(function () {
$("#new_voornaam").val(firstname);
$("#new_achternaam").val(lastName);
$("#new_straat").val(street);
});

$(document).ready(function () {
$( "#NextButton" ).click(function() {
console.log("clicked next -> Cookie stored");

document.cookie = "firstname=" + document.getElementById("new_voornaam").value;
document.cookie = "lastName=" + document.getElementById("new_achternaam").value;
document.cookie = "street=" + document.getElementById("new_straat").value;
});
});

 

7. If we are creating a new case, the fields are automatically populated:

 

 

If you have extra questions regarding Cookies in Dynamics 365 Portals or other question about Portals & Dynamics 365, please leave a comment.

 

And that’s how the cookie crumbles !