Advertisements

Archive

Author Archive

Dynamics Portals – Web Templates – ‘$ is not defined’ Error

Other day, I was getting ‘$ is not defined’ script error during my ‘Web Template’ load.

Portal_$_1

From the error, its clear that jQuery file reference was missing in Web Template.

The Web Template has a HTML with Liquid Template and script using jQuery and was rendering with no issues an hour ago and there were no changes made to the Web Template content.

Reason and Fix:

  • ‘Use Website Header and Footer’ field was unchecked in ‘Page Template’ which was causing the issue.

Portal_$_2

  • jQuery file would be implicitly available to the ‘Web Template’ when ‘Use Website Header and Footer’ field is checked on ‘Page Template’.
  • Save the Page Template
  • Clear the portal Cache and issue should be fixed.

🙂

 

 

 

Advertisements

[Step by Step] Canvas App using on-premise SQL server as Data Source

In this post, lets see how to build a Canvas App with data from on-premise SQL Server.

Using Gateways ,data can be transferred quickly and securely between a canvas app and an on-premises data source, such as an on-premises SQL Server database or an on-premises SharePoint site.

Lets get started to configure a Gateway and read the on-premises SQL Data which acts as a Canvas App’s ‘Data Source’.

Prerequisites:

  • SQL Server with a Database and a simple table.

Gateway_13

  • Dynamics 365 subscription. Subscribe to 30 days trail here.

Configure a ‘Gateway’ to on-premise SQL Server:

We need to install ‘On-Premises Data Gateway’ service on the machine with ‘SQL Server’.

  • Connect to PowerApps maker portal using your Dynamics 365 credentials.
  • Go to Data -> Gateways and click on ‘+New gateway’ button.

Gateway_15.PNG

  • You will be redirected to downloads page and click on ‘Download’ under ‘On-Premises Data Gateway’ section.

Gateway_1

  • Download and click on the ‘GatewayInstall’ application.

Gateway_2

  • Provide your Dynamics 365 email (i.e., User ID) and click ‘Sign in’ to connect to Power platform.

Gateway_3

  • Provide your desired gateway name,recovery key and click ‘Configure’

Gateway_4

  • You will end up with below success screen.

Gateway_5

  • We are done with Gateway configuration.
  • If you go to the ‘Services’ on your machine, you should see ‘On-premises data gateway service’ up and running.

Gateway_14

  • Go back to PowerApps portal and refresh the ‘Gateways’ and you should see the configure gateway.

Gateway_6

Create a Canvas App:

As we completed ‘Gateway’ configuration, the next step to create a Canvas app and connect to on-premises SQL server using the ‘Gateway’.

  • Click on ‘+Create’ and choose ‘Canvas app from blank’

Gateway_7

  • Provide the ‘App name’ and click on ‘Create’

Gateway_8

  • Now we need to establish the connectivity between Canvas App and SQL Server.
  • Click on ‘Connect to data’ and select ‘SQL Server’ from the list.

Gateway_9

  • Choose ‘Connect using on-premises data gateway’ option and provide the SQL server, Gateway details and click ‘Create’.

Gateway_10

  • Select the table (i.e.,Contact) and click ‘Connect’ which creates a new ‘Data source’.

Gateway_11

  • Now add a Gallery component and map the ‘Data source’.

Gateway_12

Additional Details:

  • To install the ‘Gateway’, machine should have minimum configuration mentioned here.
  • Gateway installs as ‘On-premises data gateway service’ on the server. Make sure this service is running all the time.
  • Along with service, a desktop application by name ‘On-premises data gateway’ gets installed. You can enable logging and manage settings using this application.

Gateway_16

🙂

PowerApps Portal – Intro

June 14, 2019 1 comment

Those who are familiar with ADX Portals which later acquired by Microsoft and came up with ‘Dynamics Portals’ SaaS offering, ‘PowerApps’ Portal is the next evolution.

  • With PowerApps Portals, Microsoft merging the capabilities offered by Dynamics 365 Customer Engagement portals in to PowerApps Portals.
  • PowerApps Portals provides the ability to build low-code, responsive websites which allow external users to interact with the data stored in the Common Data Service (CDS).
  • PowerApps Portals will seamlessly integrate with Microsoft services like Power BI embed, Microsoft Flow, Microsoft SharePoint, Azure Blob Storage, Azure AD B2C, and Azure Application Insights to enhance your portal with rich content and provide a personalized experience to your customers.
  • All the components of Dynamics CE portals (i.e., Entity Forms, Web Templates, Web Forms,etc…) will be continued to available in PowerApps Portals.
  • PowerApps portal uses the same ‘Liquid Template’ scripting conventions of Dynamics CE Portals.

How to get started?

  • General availability of PowerApps Portal will from July 2019.
  • A new App type called “Portal” will be available directly from PowerApps.

PowerApps Portal

  • You can subscribe here to be informed about the Public Preview availability.

Whats the upgrade path for existing Dynamics 365 CE Portals?

  • All the existing Dynamics 365 CE portals will auto upgrade to PowerApps portals in coming months.

🙂

 

 

 

 

D365 Customer Service – Virtual Agent – Get Started

Virtual Agent for Dynamics 365 Customer Service is a new cloud offering built on the Microsoft Bot Framework to create powerful bots using a guided, no-code graphical interface.

In this article, lets see how to get started with ‘Virtual Agent’ using a simple demo.

Prerequisite:

  • Subscribe to a Dynamics trail .

Steps to Subscribe ‘Virtual Agent'(Preview):

  • Go to ‘Virtual Agent’ Portal and click on ‘Try preview’

VA_1

  • Login with your O365 credentials.
  • Continue by clicking on ‘Create’ link.

VA_2.PNG

  • You will be redirected to ‘Virtual Agent’ application with a ‘Create a new bot’ popup
  • Provide the bot’s name and click ‘Create’

VA_3

  • Initial Bot set up would take 2-4 minutes and you would be notified post completion.

VA_4

  • Once the bot set up completes, you need to configure ‘Topics’ to start the bot conversations.

Create ‘Topics’:

  • ‘Topics’ allows to set context of bot conversation. Its a combination of 2
    • Trigger Phrases – Prompts the conversation with BOT.  Phrases like ‘Hi’, ‘Hello’, ‘Help’, ‘Issue’ are sample phrases.
    • Conversation – Represents exchanges between bot and user.
  • Lets create a simple ‘Topic’ by name ‘Welcome’ to wish the User by his name.
  • Click on ‘Go to Topics’ link or ‘Topics’ tab.

VA_10

  • From the ‘Topics’ tab, click on ‘New Topic’

VA_11

  • Add the ‘Trigger Phases’
    • I added ‘Hi’ and ‘Hello’ as my Phrases to initiate the conversation.

VA_12

  • Click ‘Edit’ under ‘Conversation’ section
  • Now you will be redirected to ‘Conversation’ flow page.
  • Add ‘Bot Says’ control, to communicate to User from BOT.
  • Add ‘User Responses’ control, to provide options to User to answer
    • For example, I am adding ‘Tampa’ and ‘Orlando’ as ‘User Responses’ to show the city names as options for User to pick.
  • You can also create a variable to capture User response.
    • I created 2 variables to capture User’s ‘Name’ and ‘City’.

VA_13

  • Save the Conversation

Test the BOT:

  • Once you configured ‘Topics’, you can test the BOT by clicking ‘Test your bot’ link on the footer.
  • Turn on ‘Tracing’ to check the flow.

VA_14

Deploy the BOT:

  • Click ‘Deploy’ to configure Channel.
  • For this demo, I am choosing, ‘Demo Website’ option, which hosts the bot to a sandbox demo website.
  • Demo Website:

VA_9

  • Provide the details and click on ‘Publish’. You will be redirected to the demo website.

VA_15

  • Type ‘Hello’ phrase to initiate BOT conversation.
  • BOT responds back asking ‘Please help with your Name’

VA_7

  • You can also see City options, which User can select instead of typing.
  • Finally, Bot responds back wishing User by capturing Name and City provided by the User.

VA_8.PNG

  • Custom Website
    • This is the second deployment option.
    • Allows you to host the BOT in an IFrame control to your web site.
    • Copy the HTML content and paste it in your web site.

VA_16

🙂

Categories: CRM, Dynamics 365 Tags: , ,

ADX Portals – Clear Cache On Web Page Submission

Adxstudio Portal application caches the results from Dynamics CRM to improve the performance.

But, there are times, where we need to override (invalidate) cache behavior to show latest data on Portals. Lets take a scenario

  • My Portal has a ‘Contact’ web page and up on ‘Submit’, a plug-in updates all the associated ‘Cases’ in the background.
  • Now, on Portal, navigate to ‘Cases’ entity list Web Page, which should show the latest ‘Cases’ data, which has been updated by plug-in in above step.

In above scenario, we will not get the latest ‘Cases’ due to Portal Cache behavior.

So what are the ‘Cache Invalidation’ options?

  • Manual Cache Invalidation:
    • This option is to manually hit the JavaScript bookmark-let  as specified here.
    • Drawback:
      • Its not viable, to ask portal users to hit the URL every time they ‘Submit’ the ‘Contact’ web page
  • Web Notifications:
    • A Web Notification Plugin registered with the Adxstudio Portals solution in CRM is triggered on all entity create, update, delete, disassociate, associate, publish, and publish all messages and notifies the Web Notification URLs defined in the CRM to invalidate the cache so the users visiting the portal get the recent data changes
    • Drawback:
      • A ‘System Job’ gets created up on update of the entity, and the execution may get delayed based on the occupancy of CRM Async Service Job.
      • This is not fool proof solution.

ADX Cache_1

We took an approach to automate the ‘Manual Cache Invalidation’ process to fetch the latest CRM data.

Our Cache Invalidation Approach :

  • Create a new ‘Web Page’ and paste below ‘Manual Cache Invalidation JavaScript’ code in ‘Custom JavaScript’ field.
    • Note: You don’t need to associate any ‘Web Form’, ‘Entity List’ or ‘Entity Form’ to this Web Page.

$(document).ready(function () {
var url = document.location.protocol + ‘//’ + document.location.host + (document.location.host.indexOf(“demo.adxstudio.com”) != -1 ? document.location.pathname.split(“/”).slice(0, 3).join(“/”) : “”) + ‘/Cache.axd?Message=InvalidateAll&d=’ + (new Date()).valueOf();
var req = new XMLHttpRequest();
req.open(‘GET’, url, false);
req.send(null);
// Redirect to Portal Home Page
window.location.href = ‘../’;
});

  • In below screen, I created a new Web Page ‘Portal Cache Clear’ and copied the above script.

ADX Cache_2

  • So, to invalidate ‘Cache’ on the ‘Submit’ of any of your Portal form, In Entity Form’s ‘On Success Settings’, Redirect to Cache ‘Web Page’ as configured in below screen.

ADX Cache_3

  • That’s it. Your portal should invalidate cache, up on Entity Form submission. One caveat of this approach is, ‘Portal Cache’ web page will flash for few seconds before redirecting to portal’s ‘Home’ page.

Note:

  • This Information is Relevant to Legacy Adxstudio Portals Only.
  • Dynamics 365 Portal Add-on’s Do Not Require this Configuration.

🙂

 

 

Categories: ADX Tags: ,

Dynamics Portals – Using ‘Emojis’ in Entity Form and Entity List

In this article, lets see how to use Emoji’s to capture the data in Portal’s Forms.

Emoji1

It’s very simple to achieve. All you need to do is to set the Dynamics ‘Option Set’ field’s ‘Label’ with ‘Emoji’.

Below is the ‘HOW’ part.

Create an ‘Option Set’ field with ‘Emojis’:

  • In Dynamics, create a new ‘Option Set’ Field with 2 options
  • In the Option’s ‘Label’ paste the Emoji.

Emoji2

  • Place this ‘Option Set’ field on the Dynamics Form and View which are being referred in your portal’s ‘Entity Form’ and ‘Entity List’.

Make ‘Options’ to render side by side in Portal:

  • By default, ‘Option Set’ renders as ‘Drop down’ control in Portal.
  • To show the ‘Options’ as Side by Side, add a new ‘Metadata’ to ‘Entity Form’.

Emoji7

Test the Emojis in Portal:

  • Navigate to Portal and open the ‘Employees’ view. Option Set value would renders as ‘Emoji’

Emoji5

  • Open the record and you should get ‘Emojis’ rendered side by side.

Emoji1

Note:

  • You can ‘Copy’ the Emoji from here . Search the Emoji as per your requirement and click ‘Copy’.

Emoji3

  • The rendering of Emojis will be same in ‘Dynamics Web Application’.

Emoji8

🙂 

 

 

 

[Code Snippet] Dynamics Portals/ADX – Set ‘Field Requirement’ using script

Below is the code snippet to set the requirement level (i.e., Required/Non-Required) of a field using script in portals. This logic handles all kind of field types including Check boxes.

Set Field As Required:

function SetFieldAsRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined && $(“#” + fieldName + “_label”) != undefined) {
$(“#” + fieldName).prop(‘required’, true);
$(“#” + fieldName).closest(“.control”).prev().addClass(“required”);

// Create new validator object
var Requiredvalidator = document.createElement(‘span’);
Requiredvalidator.style.display = “none”;
Requiredvalidator.id = fieldName + “Validator”;
Requiredvalidator.controltovalidate = fieldName;
Requiredvalidator.errormessage = “<a href=’#” + fieldName + “_label’>” + $(“#” + fieldName + “_label”).html() + ” is a required field.</a>”;
Requiredvalidator.initialvalue = “”;
Requiredvalidator.evaluationfunction = function () {
var fieldControl = $(“#” + fieldName);
if (fieldControl.is(“span”)) {
var value0 = $(“#” + fieldName + “_0”).prop(“checked”);
var value1 = $(“#” + fieldName + “_1”).prop(“checked”);
if (value0 == false && value1 == false) {
return false;
} else {
return true;
}
}
else {
var value = $(“#” + fieldName).val();
if (value == null || value == “”) {
return false;
} else {
return true;
}
}
};

// Add the new validator to the page validators array
Page_Validators.push(Requiredvalidator);
}
}

Set Field As Non Required:

function SetFieldAsNonRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined) {
$(“#” + fieldName).closest(“.control”).prev().removeClass(“required”);
$(“#” + fieldName).prop(‘required’, false);

for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].id == fieldName + “Validator”) {
// Remove the current field’s ‘Required’ validator from ‘Page_Validators’ array
Page_Validators.splice(i);
}
}
}
}

How to use the functions:

  • Above functions can be called from ‘Custom JavaScript’ tab of Portal’s ‘Entity Form’.
  • Pass the Dynamics field’s schema name as the parameter to both functions.
    • In below example, ’emailaddress1′ is the field name which I want to set the Requirement level.

ADXJ_1

Refer the article for Portal script syntax’s and usage.

🙂