Delivering solutions and services that help Enterprise companies compete in a changing digital landscape.

The Laboratory

Enhancing the Developer Experience: Leveraging the dxdashboard

Leverage dxdashboard to enhance the development experience of WebDAV theme files, as well as Script Applications.

Overview

When developing sites using HCLs Digital Experience, it may be necessary to make changes to:

  • Theme files in the WebDAV

  • Script Applications

When developing these assets, you will need a mechanism to deploy the changes to the digital experience server.  This is where the dxdashboard comes in.

dxdashboard

What it is:

The dxdashboard is a developers tool for use with HCL Digital Experience.

What it accomplishes:

The dxdashboard allows developers to do the following:

  • Change and push files for themes that are stored in WebDAV

  • Change and push files for script applications

Where to obtain it:

https://github.com/hcl-dx/WebDevToolkitForDx

Setup

Follow the instructions from the github repository listed above to install the dxdashboard.  Once you have it installed, you can run by issuing in the command prompt:

PS C:Userschrisdxdashmasteringdxappsmasteringdxscriptapp> dxdashboard

Once you have the tool running, you will be presented with the dashboard:

On the Settings tab, you will configure where the various pieces of the application are stored on your local environment.  It will ask where to put Script Applications, Theme, and WCM Design Libraries.

For my configuration, I created a folder in the following location:

C:Userschrisdxdashmasteringdx

Then for the settings:

C:Userschrisdxdashmasteringdxapps

C:Userschrisdxdashmasteringdxthemes

C:Userschrisdxdashmasteringdxwcmlibs

In the server section, you will enter:

Name: the name of this connection.

User Name: the username you will authenticate with for the DX server

Password: the password you will authenticate with

Host: the host of your server

Port: the port for the server.  For example, 10039 if you’re using default install

Content Handler: the context root of the contenthandler. Enter /wps/mycontenthandler unless its been changed.

Secure: check this if you use https and not http

Click save to save the connection and configuration information.

Theme Example

Retrieving Theme

When we first use the theme tab, it will be empty:

Click on Get Themes to review the themes on the server:

I will retrieve the CMKDemoTheme.  In the text input under the name of the theme, I will enter CMKDemoTheme, then create Theme Folders:

After you push Create Theme Folders, you will see the following:

Now that you have the reference to the theme, click on the Pull button.  This will retrieve the files to your filesystem.

Making Change

To make a change, you have to modify one or more files.  Do to this, I am going to use vscode to bring in the theme files, and make a change.

I have opened the theme.html file:

I will add an extra class to the class list of the body tag, and then save the file:

Pushing Change

Now in the dashboard, click on the Push Updates button:

Note that if you click the Watch button, it will watch for changes in the filesystem for the theme files, and push them automatically.

Verify Change

After pushing the change, I look to one of the pages that is using my custom theme.  Inspecting the source I see:

Actual theme development is above the scope of this document, but you can see how easy this tool makes it to get/modify/push files to the WebDAV for themes in Digital Experience.

Script Application Example

Now with script applications, it’s not possible to pull them from the server in the way you can with themes with this tool. You have to export from the server, put them in a location where the tool can be aware of them, and then push the changes.

Create Script Application and Download Locally

Put a page in edit mode, then add a Script Application to the page.  See hcl documentation if necessary to see how to add applications to the page.

Once in edit mode, in the script application you can see:

Click Actions -> Export

This will give you a zip file containing

Now, in the folder for your dxdashboard where you configured to place script applications, create a new folder.

For example, I created a folder named DemoApplication:

I placed the 2 files from the zip into the DemoApplication folder.

And now in the Dashboard, on the Script Applications tab, I click the refresh button and now see my DemoApplication:

Change Local Application

Now, in ide or txt editor or whatever you want to use to modify files, open the index.html file from the DemoApplication folder.  Make a change in the html, I added CMK TEST:

Save the changes to your file.

Push Changes

Now in the dxdashboard, click on the Push button in the DemoApplication:

You will see the spinner, and the changes will be pushed to the server.

Navigate back to the page where you created the application, and refresh the page.  Your change will be displayed in the script application: