How to: Fix WebResources Layout in Dataverse Dashboards

🤔 The problem

If you ever managed to create a Dataverse Dashboard containing an HTML WebResource (e.g. to show some calculated KPI), by default the resulting UI is quite ugly:

What I don't like:

1. Each WebResource component has a surrounding black border I would like to get rid of
2. The minimum vertical space that can be occupied by the WebResources row is 6 lines. Too much for my needs.

For both points, the Dashboard editor doesn't provides any option to fix the problem:

• No option to remove the border

• And I cannot reduce the vertical space

💡 The solution

As usual, the solution is quite simple via small XML tweaking.

Step 1. Create a new solution

In my case I already had a "ribbon" solution ready to use, thus in the screenshots below you'll see that one.

Step 2. Add the dashboard as the only component

Access the solution, then click on Add existing > Dashboard

And peek the dashboard you want to update (in my case, Tickets).

Step 3. Move to VS Code

In VSCode terminal, run the following PAC CLI command:

pac solution clone --name "<your solution unique name>"

PAC CLI will automatically download the solution and unpack its components in the current folder.

Step 4. Update the Dashboard XML definition

Access the dashboard xml definition you'll find at <solution name>\src\Dashboards\<dashboard guid>.xml

In the XML definition, find the WebResources controls. They can be easily found searching by the following string <control id="WebResource_.

You'll see something like this:

<cell colspan="1" rowspan="6" showlabel="false" id="{77846b48-5139-4c61-a5d1-fda39d80f21b}">
    <labels>
    <label description="KPI1" languagecode="1033" />
    </labels>
    <control id="WebResource_kpi1" classid="{9FDF5F91-88B1-47f4-AD53-C11EFC01A01D}">
    <parameters>
        <Url>prefix_/pages/dashboardkpi/index.html</Url>
        <Data>ticket_total_count</Data>
        <PassParameters>false</PassParameters>
        <ShowOnMobileClient>false</ShowOnMobileClient>
        <Security>false</Security>
        <Scrolling>auto</Scrolling>
        <Border>true</Border>
        <WebResourceId>{F30B702C-C9C4-F011-BBD3-7CED8D454E57}</WebResourceId>
    </parameters>
    </control>
</cell>

To remove the border, update the <Border> node to false.
To decrease the height, set the rowspan attribute to 3 (or adjust it as you wish).

Like this:

<cell colspan="1" rowspan="3" showlabel="false" id="{77846b48-5139-4c61-a5d1-fda39d80f21b}">
    <labels>
    <label description="KPI1" languagecode="1033" />
    </labels>
    <control id="WebResource_kpi1" classid="{9FDF5F91-88B1-47f4-AD53-C11EFC01A01D}">
    <parameters>
        <Url>prefix_/pages/dashboardkpi/index.html</Url>
        <Data>ticket_total_count</Data>
        <PassParameters>false</PassParameters>
        <ShowOnMobileClient>false</ShowOnMobileClient>
        <Security>false</Security>
        <Scrolling>auto</Scrolling>
        <Border>false</Border>
        <WebResourceId>{F30B702C-C9C4-F011-BBD3-7CED8D454E57}</WebResourceId>
    </parameters>
    </control>
</cell>

Step 5. Rebuild the solution in unmanaged mode

Open the terminal in the folder containing the <solution>.cdsproj file and run the following command:

dotnet build

it will generate the unmanaged version of the solution in the \bin\Debug subfolder of the current folder.

Step 6. Import the generated solution

Via PAC CLI:

# ribbon is the name of my solution, change it with your own
pac solution import -p .\bin\debug\ribbon.zip

Step 7. Publish all

This time, let's use PACX

pacx publish all

You can always do it the old way, via maker portal

😎 The result

Et voilà, the same dashboard, with both issues fixed ☺️

Hope this helps you too!