ADXStudio – Dynamics 365 Blog

ADXStudio – Dynamics 365 Blog

Recently, I faced a challenging and interesting task of implementing Signature Pad in Dynamics CRM Portal/ADXStudio. This blog demonstrates how to implement the HTML5 Signature Pad in CRM Portal/ADXStudio.

It is possible?

Yes, with some tricks, it is possible. Please follow the steps below to achieve it.

Signature Pad Reference

Please use the below link for the example and GitHub code which used as reference to embed the Signature Pad in CRM Portal.

Github Source code link

Signature Pad example link

Steps to Follow

Step 1: In Dynamics CRM, create a new entity, name it as “Signature”, and create the following fields:

Information form in Signature Pad entity (CRM):

Step 2: Create a new entity form record referring “Signature” entity and Respective Information form related to “Signature” entity in Dynamics CRM:

Step 3: By default, .js file is blocked in CRM attachments. For information on how to upload a JavaScript as web file in Dynamics CRM, please refer to the below blog which explains how to upload .js file in CRM Notes.

Dynamics 365 portals: JavaScript as Web Files

After enabling the .js file in CRM:

  1. Create a new web file in CRM.

Create a new web file and use the following configuration for “signature_pad.js” web file record.

Download the JavaScript from this GitHub link and upload the JavaScript file in CRM Notes related to “signature_pad.js” web file record:

  1. Again, create a new web file record in CRM and use the following configuration for “app.js” web file record.

Download the JavaScript from the GitHub link and upload the JavaScript file in CRM Notes related to ““app.js”.

  1. Create new web file record in CRM and use the following configuration for “signature-pad.css” web file record.

Upload the following CSS in notes attachment. I have slightly modified the code from GitHub by removing the background in CSS.

CSS Code:

.m-signature-pad 

.m-signature-pad:before, .m-signature-pad:after 

.m-signature-pad:after 

.m-signature-pad--body 

.m-signature-pad--body
  canvas 

.m-signature-pad--footer 

.m-signature-pad--footer
  .description 

.m-signature-pad--footer
  .left, .right 

.m-signature-pad--footer
  .left 

.m-signature-pad--footer
  .right 

@media screen and (max-width: 1024px) 
  #github 
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) 
}

@media screen and (max-height: 320px) 
  .m-signature-pad--footer 
  .m-signature-pad--footer
    .description 
}

Save the CSS as “signature-pad.css” and upload in CRM Notes attachment:

Step 4: Create a new web template record in CRM and use the following configuration.

Use the below liquid template to paste in the Source Field in “Create Signature Web Template” record.

Liquid Template Code:

Click on this link to open liquid template code.

Step 5: Create a new Page Template Record in CRM and use the following configuration as mentioned below. Also, refer “Create Signature Web Template” Record.

Step 6: Create a new web page record in CRM and use the following configuration. Also, refer “Create Signature Page Template” record.

Step 7: Create a new metadata column in “Create Signature Entity Form” which is used to display the “success message” once the Signature Pad captured successfully.

Use the following code in Label:

Step 8: Finally, it will display like this in CRM Portal:

Signature Pad Gif Demo:

In my next blog, I will explain how to display the signature in CRM and how to display the signature in SSRS report.

The post Signature Pad in CRM Portal/ADXStudio appeared first on Dynamics 365 Blog.

]]>

Published at

Dynamics 365 Online and ADX Portal (Version 7.0.0024) SharePoint Grid Issue

Dynamics 365 Online and ADX Portal (Version 7.0.0024) SharePoint Grid Issue

Error #1: SharePoint Grid Loading issue

Issue Description

We started getting the error after we upgraded ADX Portal Version 7.0.0021 to ADX Portal 7.0.0024, and Dynamics CRM was upgraded from CRM 2016 to Dynamics 365.

The SharePoint document grid was working fine with ADX Portal version 7.0.0021 and Dynamics CRM 2016; however after it was upgraded to Dynamics 365 and ADX 7.0.0024, we started getting following errors:

Repro Steps

Step 1: Log in to the ADX Portal.

Step 2: Go to the Business Case List Navigation > create Edit Business case.

Step 3: Select the Business Case available to work on from the list (click to open ).

Step 4: Go to the Business Case > Documents tab.

The SharePoint grid is stuck when loading on the webpage.

Dynamics 365 Online and ADX Portal (Version 7.0.0024) SharePoint Grid Issue

Investigation

During debugging, it was breaking at line 132 as shown in the snapshot below:

In the traces, you can see it wasn’t able to parse ‘ &#32’ which got added in the handlebar tags of the SharePoint  html template.

Below is the SharePoint template and traces for reference:

SharePoint Template

Traces

handlebars.js:871 Uncaught Error: Parse error on line 1:
…ass=”toolbar } d
———————–^
Expecting ‘ID’, ‘DATA’, got ‘INVALID’
at Parser.parseError (handlebars.js:871)
at Parser.parse (handlebars.js:923)
at HandlebarsEnvironment.parse (handlebars.js:1272)
at compileInput (handlebars.js:1735)
at handlebars.js:1744
at Object. (sharepoint-grid.js:132)
at j (jquery-1.11.1.min.js:10)
at Object.fireWith [as resolveWith] (jquery-1.11.1.min.js:10)
at x (jquery-1.11.1.min.js:12)
at XMLHttpRequest.b (jquery-1.11.1.min.js:12)

Following resolution was suggested by Microsoft Support team after we logged the ticket with them.

The issue was related to encoding and was fixed by removing the Encoder Type from the web.config file of the ADX 7.0.0024 website.

  1. Go to the root directory of your website.
  2. Search for file web.config.
  3. Take backup of web.config file.
  4. Open the web.config file in Notepad or Visual Studio editor.
  5. Look for Encoder Type by doing CTRL+F.

  1. Remove the highlighted attribute from the below mentioned tag of web.config file.
  2. Save the web.config File
  3. Restart the website from IIS.

After this fix, we could see the SharePoint grid working properly on the ADX Portal.

Error #2: On Add Files of Share Point Grid we are getting the following Error:

Repro Steps:

Step 1: Login to the Government Portal.

Step 2: Go to the Business Case List navigation > create Edit Business Case.

Step 3: Select the Business Case available to work on from the list (click to open )

Step 4: Go to the Business Case > Documents tab.

Step 5: Click on the Add File button on the grid

Step 6 : Click Browse to add the file and click Add Filea:

Traces

The required anti-forgery form field “__RequestVerificationToken” is not present.

Resolution

Change the mime Type in the Add File function of the SharepointGrid.js

mimeType: “multipart/form-data; charset=utf-8”,

Use the Following Steps to fix the issue:

  1. Go to the path of the website (Installation Folder) > AdxStudio > XrmPortals > Dev > 7.0.0024 > Samples > MasterPortal

  1. Open the Js folder (Installation Folder) > AdxStudio > XrmPortals > Dev>7.0.0024 > Samples > MasterPortal > js.
  2. Edit the file sharepoint-grid.js and search for “Add Files “function.
  3. Change the existing mime type with mime Type: “multipart/form-data; charset=utf-8.

  1. Save the file.
  2. Restart the website from IIS.
  3. Browse and check by adding a document from the SharePoint grid of ADX Portal.

Published at Sun, 25 Jun 2017 17:00:14 +0000

Signature Pad in CRM Portal/ADXStudio

Signature Pad in CRM Portal/ADXStudio

Recently, I faced a challenging and interesting task of implementing Signature Pad in Dynamics CRM Portal/ADXStudio. This blog demonstrates how to implement the HTML5 Signature Pad in CRM Portal/ADXStudio.

It is possible?

Yes, with some tricks, it is possible. Please follow the steps below to achieve it.

Signature Pad Reference

Please use the below link for the example and GitHub code which used as reference to embed the Signature Pad in CRM Portal.

Github Source code link

Signature Pad example link

Steps to Follow

Step 1: In Dynamics CRM, create a new entity, name it as “Signature”, and create the following fields:

Information form in Signature Pad entity (CRM):

Step 2: Create a new entity form record referring “Signature” entity and Respective Information form related to “Signature” entity in Dynamics CRM:

Step 3: By default, .js file is blocked in CRM attachments. For information on how to upload a JavaScript as web file in Dynamics CRM, please refer to the below blog which explains how to upload .js file in CRM Notes.

Dynamics 365 portals: JavaScript as Web Files

After enabling the .js file in CRM:

  1. Create a new web file in CRM.

Create a new web file and use the following configuration for “signature_pad.js” web file record.

Download the JavaScript from this GitHub link and upload the JavaScript file in CRM Notes related to “signature_pad.js” web file record:

  1. Again, create a new web file record in CRM and use the following configuration for “app.js” web file record.

Download the JavaScript from the GitHub link and upload the JavaScript file in CRM Notes related to ““app.js”.

  1. Create new web file record in CRM and use the following configuration for “signature-pad.css” web file record.

Upload the following CSS in notes attachment. I have slightly modified the code from GitHub by removing the background in CSS.

CSS Code:

Save the CSS as “signature-pad.css” and upload in CRM Notes attachment:

Step 4: Create a new web template record in CRM and use the following configuration.

Use the below liquid template to paste in the Source Field in “Create Signature Web Template” record.

Liquid Template Code:

Click on this link to open liquid template code.

Step 5: Create a new Page Template Record in CRM and use the following configuration as mentioned below. Also, refer “Create Signature Web Template” Record.

Step 6: Create a new web page record in CRM and use the following configuration. Also, refer “Create Signature Page Template” record.

Step 7: Create a new metadata column in “Create Signature Entity Form” which is used to display the “success message” once the Signature Pad captured successfully.

Use the following code in Label:

Step 8: Finally, it will display like this in CRM Portal:

Signature Pad Gif Demo:

In my next blog, I will explain how to display the signature in CRM and how to display the signature in SSRS report.

Published at Thu, 13 Jul 2017 17:00:28 +0000

Deploying Adxstudio Website Data

Deploying Adxstudio Website Data

Overview

There are two parts in deploying Adxstudio portal: one is deploying the website to its host (unless you’re using hosted model), and the other is deploying website data to Dynamics CRM. In this blog, we’ll discuss deploying website data.

What data?

There are a number of entities and relationships that define a website including web pages, entity list, entity forms, web forms, web roles, and so on. These data need to be updated when you make changes via configuration (or even javascript).

With the normal ALM process developers would make changes in DEV environment, these changes then get deployed to TEST, UAT and finally PROD environment. This process requires means to deploy the changes to different environment efficiently.

What about tools?

Mostly, I have seen Website Copy by Adxstudio being used to deploy this data.

I have personally used it on some projects as well; however, there are some drawbacks to this tool:

  • It always creates new records instead of updating existing records.
  • It can also miss some records. (I have found it doesn’t deploy some form metadata records.)
  • You can’t configure what data is being exported.

All in all, it doesn’t make for a great deployment tool. In fact, this tool was never intended by its maker as such.

Then what?

Since it is effectively data migration, we can theoretically treat it as data migration, export the related data and import it into Dynamics CRM.

With this in mind, we have tried this method in our recent project with ConfigurationMigration tool provided in CRM SDK. We use the tool to create an export schema and use that to export the data from DEV and import it into target environment.

Advantages of using ConfigurationMigration tool:

  • It updates existing records.
  • Ability to configure what data being exported via schema (it is also reusable)
  • It won’t miss any records unless you forgot to include it in the schema.
  • You can use PackageDeployer to deploy.

However, it is far from being a perfect tool. Some drawbacks are:

  • It takes all the records in CRM for a given entity (no filter function).
  • It doesn’t update cleared (blank/null) fields.

In conclusion, we have had some success using ConfigurationMigration tool to deploy portal data. It has some drawbacks, however it proves to be a better way of deployment.

Have you tried this method? Please leave some comments if you have.

If you want to try, please get in touch and I can give you an example of the export schema.

Published at Sun, 23 Jul 2017 17:00:36 +0000

{Quick Tip – Dynamics 365 portals (ADX)}–Dynamically show/ hide entity forms in Dynamics 365 portals (ADX portals) depending on Business Logic using Liquid templates

As I have been working mostly on Dynamics 365 portals, here goes another D365 portal post.

So here is the requirement. The portal customer applies for loan and then views the status of the loan request through the portal. However for every customer, there is one contact who is kind of Power User and is hence able to view some additional details on the Loan Request Form which the regular portal customers are not able to see,

The additional details are like.

  • The internal user with whom the loan request is currently pending
  • Additional internal communications among the internal team regarding the loan request.

So here is the set-up.

  • Two Forms for loan request entity
    • General form visible to all the users
    • Admin form visible to only the power users which shows the additional details

In the portal there is loan request web-page, which depending on the logged in-user, renders the Admin form.

To determine whether the portal user is a Power User or not, there is a field on the contact entity – “Is Power User” which need to be set. Below is the screenshot for the same.

schema name for the field – new_ispoweruser

image

Creating a loan request entity and then showing it up for the demo would take lot of time and also can’t use the screens from the client system due to legal issues. So here I would basically show you with the account entity, how you can dynamically render a entity form based on condition using Liquid.

Step 1 : Create a Blank Web-Page and set it up in the Portal Navigation

Go to CRM –> Portals –> Web Pages –> New

image

As you can see, I have created a Web Page with template as Blank Page. Notice carefully that I have not set any entity form or entity list. This is because I am going to set those up dynamically depending on conditions.

Now login to the portals as admin contact and then include this web page in the Navigation.

image

image

Clicking on Loan Status gives an empty page because we are using the blank page template.

2. Setting up of Entity forms

Now to mock up the previous scenario, I have created two forms for account entity.

  • Loan Request Admin Form
  • Loan Request General

image

Create Two entity Forms in CRM based on these two forms.

image

image

3. Set up the forms Dynamically using Liquid.

Login to the portal using the admin contact and edit the Copy content of the Loan Status Page.

image

Enter the below Liquid Code in the editor.

image

Pasting the same code inline

 

 

 

 

 

 

The code is pretty simple. All it is doing is checking if the logged in portal contact is a power contact, then load the admin form. The general form is always loaded by default

Save it and now when you refresh the page, you would see the power user is able to see both the forms. Using the same construct, you render forms dynamically based on business conditions.

–Dynamically show/ hide entity forms in Dynamics 365 portals (ADX portals) depending on Business Logic using Liquid templates