So, why even do this?
- Maybe you wanna style all pages in your news section differently to your self-service section
- Maybe you wanna style your case management pages differently to your opportunity / sales pages
- Maybe you want to hide certain elements eg nav / links / footer on certain pages / in certain sections without the need for custom web templates.
All doable with this trick 🙂
Bonus; This works regardless of whether you’re on Bootstrap 3 or 5, and works across all the starter templates I’ve tried it with (including the old school customer self-service solution)
Back in the days before Power Pages, I relied on the body classes in WordPress to achieve this. Lo and behold we can do much same thing in Power Pages thanks to data attributes on the body tag!
You can see this by inspecting the page using you browser’s developer tools and looking at the body tag.
The data attribute we’re interested in here is called data-sitemap-state. The information this holds is much the same as we’d expect to find in the breadcrumbs… the URL of the current page, and the parent page it sits under.
Depending on how specific our styling is, we can target either
One specific page with equals =
All pages under a specific parent page (achieving the ‘all pages within a section’ requirement) using contains *=
Some useful examples:
| Page(s) | CSS Selector |
|---|---|
| Home | body[data-sitemap-state="/"] |
| Knowledge Base | body[data-sitemap-state="/knowledgebase/:/"] |
| Knowledge Article (child of Knowledge Base) | body[data-sitemap-state="/knowledgebase/article/:/knowledgebase/:/"] |
| All pages in the knowledge base section (including the knowledge base home page) | body[data-sitemap-state*="/knowledgebase/"] |
| The support page | body[data-sitemap-state="/support/:/"] |
| The create case page (a child of the support page) | body[data-sitemap-state="/support/create-case/:/support/:/"] |
| The edit case page (a child of the support page) | body[data-sitemap-state="/support/edit-case/:/support/:/"] |
| All pages in the support section (including the support page) | body[data-sitemap-state*="/support/"] |
Bonus: another cool trick with data attributes… use CSS ‘before’ pseudo elements to add Font Awesome icons
This is likely something we’d previously have approached with JavaScript on load of the list. With data attributes we can achieve this with CSS alone thanks to the useful clues / hooks that the Power Pages team leave us in the markup…
Taking that a step further, I’m going to prefix a Font Awesome folder icon next to each case in the List on the service page. (Note this specific to Bootstrap 5. Power Pages sites on BS5 ship with Font Awesome 6’s Free collection):
The selector:
tr[data-entity="incident"] td > a.details-link
What this selector means is:
- For lists where the Dataverse table is Case (the logical name is incident)
- Get table cells where the details link (set in List actions) is directly in the cell (rather than the Actions drop-down menu)
Now to prefix / prepend that with a folder icon:
Head over to https://fontawesome.com/search?o=r&m=free and search for the icon you want.
Click the icon
A dialogue will pop up showing details of how to use / customise the icon…
Click the code in the Unicode section to copy it, like so:
And finally, here’s the full CSS snippet:
Note – I’ve added ::before to the selector as that’s all I want to style, not the link itself:
tr[data-entity="incident"] td > a.details-link::before {
display: inline-block;
text-rendering: auto;
font-family: FontAwesome;
content: "f0ad";
margin-right: 0.7em;
font-size: 1.15em;
}
I’ll update the post with some visual examples in future. In the meantime, I’m excited to see where you all take this. Happy making 🙂
