How to: Fix WebResources Layout in Dataverse Dashboards

This content originally appeared on DEV Community and was authored by Riccardo Gregori

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!

This content originally appeared on DEV Community and was authored by Riccardo Gregori