XrmToolBox: Portal Code Editor Overview and Review

Before we dive into today’s topic, I want to thank everyone who attended my “Portal Developer Primer” webinar on March 30th.  My apologies to those of you who tried to attend on March 28th, thankfully we were able to sort out the technical diffuculties.  The recording can be found by clicking here.

Without further delay, lets dive in!

XrmToolBox

For anyone who has done any kind of configuration or development for Dynamics 365, sooner or later (and hopefully sooner) you will come across the “XrmToolBox” (All one word).  The XrmToolBox is a collection of utilities and tools that make administration and configuration of Dynamics 365 much more efficient and power user friendly.

The original version was created by Tanguy Touzard and consolidated some of his already great standalone tools.  Since then, many other tools have been added and it seems new ones are added each week.  What is even more cool is that the tool is FREE!

You never heard of it?  Really? Stop reading this blog and go and download NOW.  You can download the XrmToolBox by clicking here.  This posting is not going anywhere. Even though XrmToolBox is free, before you come back, be sure to send a donation to Tanguy for all his hard work!   There is a PayPal button built in.  Just do it!

Managing Portal Code with the Portal Code Editor

One thing that Dynamics 365 is good at is managing, displaying and transacting business data.  One thing that Dynamics 365 is NOT good at is providing intuitive ways to develop and manage system configurations.

Configuring the Portal can sometimes also be very cumbersome. One way to modify or edit portal code was via the front side editing tools, but even that is limited to web page JavaScript.   The other way was to navigate to the Web Template, Entity Form, Web Page, Entity List, Web Form Step or Web File records and update/upload any JavaScript or Liquid code.  It begins to get confusing and you can easily lose track of where you added or updated code.

gottobeabetterway
Navigating all these Dyn365 Records?

Last Friday,  thankfully Monsier Touzard the creator of the XrmToolBox, released a new tool called the “Portal Code Editor” to help manage this madness.

The Portal Code Editor option will appear in the updates and the latest version of the XrmToolBox.

xrmtoolbox

Like all other XrmToolBox items, you will need to first to connect to your Dynamics 365/CRM environment to use it.  Note that I have only so far tried this on a Dynamics 365 instance with a Online Portal.  I believe that this will work for Adxstudio portals as well.  Update: this tool currently only works for Dynamics 365 Online Portals.  With Adxstudio Portals now being only provided on a very limited basis (see here) it may not matter.

Once connect, you can click the “Load Items” and see Web Pages, Entity Forms, Web Templates and Web Files.  Currently missing (but I am sure will eventually show in a later version) are Web Form Steps and Entity Lists.  Content Snippets might also be a nice add.  However, this is a great start!

2portalitems

For example, you navigate to a particular web page and choose between JavaScript or the custom CSS for that particular page.  The code will appear in the same style of editor as the “Web Resources Manager” tool.  (Used for regular Dyn365 JavaScripts)

3.codeeditor

While it appears that each of web page records were duplicated, this is likely a side effect of the new multilanguage support for Portals where language content is stored in “child” web page records.

It might be nice if this list only showed content pages. *UPDATE* after playing with I am noticing that the code attached to the “parent” page is what gets fired, but I need to spend more time to get conclusive results.  I will update accordingly.

The tool will also give you the ability to view the custom Javascript for Entity Forms:

4.entityform

Along with CSS and JavaScript, you can edit Web Templates:

5.webtemplate

Currently, the tool does not have colour coding to help with formatting Liquid code.  If this is a deal breaker for you, there are not many tools out there that do colour coding for Liquid.  I did find an editor called “Sublime” that has an add-in package to format Liquid.  You could write your Liquid code and either paste it back to the Web Template or to the Portal Code editor.  The link to Sublime is here but today I am getting errors accessing the site.

6.sublime

Within the Portal Code Editor, once you make a change (or paste in some new code) the titles will appear in RED to indicate that changes have been made.

7.Editsmade

I found that simply clicking “Update checked items” DID NOT update my Web Template Record in Dynamics 365.

I first had to “save” the code via “File -> Save”

8.saveas

Followed by “Apply changes to portal” that would appear after hitting save.

9.applychanges

My code would update in Dynamics 365

10.editsindyn365

And of course, the beauty of Web Templates is that you don’t need to publish or push portal code to a server, the update is automatic:

11.templateupdated

I attempted to look at the Web File code to edit the Bootstrap CSS, this caused the XrmToolBox to crash.

Despite the minor glitches, I think this tool is going to really make Portal configuration a lot smoother.  I assume that the bugs will be worked out and support for Entity Lists and Web Form Steps will eventually show up.  As mentioned above, I would like to see only “content” the web pages where the code works (I need to figure this out) show up as having both the main web page and content page could get confusing.  Definitely another great addition to the XrmToolBox!

4/5 stars.

Hope you find this posting helpful!

Cheers
Nick

6 thoughts on “XrmToolBox: Portal Code Editor Overview and Review

  1. Hey Nick, I’m a bit late to the party but any chance I could get a link/access to the Portal Developer Primer recording? I’m finding these portal posts very useful!

    Many thanks

    Like

  2. After my entity form modifications, i saved and i clicked publish save changes to portal, then after i clicked update checked items, after few minutes, my portal UI completely changed, but working my functionality code fine.

    why the UI changed completely….???
    How can i solve this problem

    Like

    1. I have seen this happen sometimes, the CSS doesn’t get properly applied after an update. Log in to the portal as the administrator, go to https://<&gt;.microsoftcrmportals.com/_services/about and click “clear the cache” it should resolve the issue, if that doesn’t work, try a full Portal restart. If the issue persists, check if you have any custom CSS files and finally open a support ticket (which unfortunately is a time-consuming process), but since they have access to the backend they should be able to help.

      Like

      1. Hi Nick,

        Thanks for quick replay, i have no option to clear the cache even i login portal, it’s not showing cache clear option.

        i observed one point in solutions my custom portal status is Not Installed. why do have any idea..??

        I raise the ticket to MS people they are doing work..

        coming to restart as you mentioned, if i did restart any customization and configuration is lost….???
        i tried with trail org, i restarted it’s not effect anything, there solution status is Installed.

        why i tested this one trail org, i want to find where the problem is Portal or XRMtoolBox, Finley i got same issue in trail org, with same issue. i hope problem with XRMtollBox.

        Like

      2. You will need to make sure that the contact you login with has the “administrator” web role in order to see the Clear Cache button.

        Depending on what “starter portal” you installed, some solutions will appear as not installed (e.g. if you choose “custom portal” then customer self service and partner portal solutions will not be installed.

        Make sure you choose “restart” NOT “reset” see https://www.engineeredcode.com/blog/dynamics-365-portal-restart-vs-reset for differences, that being said, you still should not have lost your customizations.

        I also recommend going through this new MS-Learn content, I think that might provide some more clarity on how the portals work, and help with your testing and troubleshooting; https://docs.microsoft.com/learn/paths/get-started-dynamics-365-portals/

        Hope this helps!

        Like

Leave a comment