In this blog post, I will walk through the steps that can be followed to style the dropdown that renders on a web page in a Power Apps Portal app.
Problem Statement
How to style dropdowns displayed on Entity List? How to make your Power Apps Portal App designed as per branding guidelines?
Below is a snapshot of how the default dropdown looks like and we will take a look at how we can customize it.
Solution
To add styling to the Dropdowns in the Entity List, you can add the code provided in this blog at the Entity List level or at the Web Page level.
As part of this blog, we are adding it to the Web Page level. You can follow the Steps as:
1) Navigate to the environment where your portal app is provisioned. Open the "Portal Management" app.
2) Select the "Web Pages" menu from the sitemap.
3) Select the appropriate page. Scroll down and open the localized content.
4) Once the Content Page is opened, switch to the Advanced tab and add the JavaScript and CSS code.
JavaScript Code to be Added
var x, i, j, l, ll, selElmnt, a, b, c;
x = document.getElementsByClassName("entitylist-filter-option-text");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 0; j < ll; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].label;
c.addEventListener("click", function(e) {
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].label == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);Explanation: This creates an additional dropdown on the top of the existing one and synchronizes the function between the two.
CSS Code to be Added
input {
outline: none;
box-shadow: none;
}
.entitylist-filter-option-group .h4 {
display: block;
font-family: 'Arial Bold', 'Arial', sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: 1px;
color: #0071A2;
text-transform: uppercase;
line-height: 27px;
font-size: 90%;
}
.btn-default, .btn-default:hover, .btn-default:focus {
background-color: rgba(0, 113, 162, 1);
border: 1px solid rgb(0, 104, 148);
border-radius: 5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'Arial Bold', 'Arial', sans-serif;
font-weight: 700;
color: #fff;
}
input.enter-search-term {
padding: 8px 18px;
}
a.find-solution {
padding: 8px 18px;
cursor: pointer;
background-color: rgba(0, 113, 162, 1);
text-decoration: none;
}
.entitylist-filter-option-text {
position: relative;
font-family: Arial;
}
.entitylist-filter-option-text select {
display: none;
}
.select-selected {
height: 18px;
background-color: transparent;
border: 1px solid #ccc !important;
color: rgba(0, 113, 162, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: rgba(0, 113, 162, 1) transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
border-color: transparent transparent rgba(0, 113, 162, 1) transparent;
top: 7px;
}
.select-items div,.select-selected {
color: rgba(0, 113, 162, 1);
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
height:36px;
}
.select-items {
position: absolute;
background-color: #f1f1f1;
top: 100%;
left: 0;
right: 0;
z-index: 99;
max-height: 280px;
width:inherit;
overflow-y: auto;
}
.select-hide {
display: none;
}
.input-group-addon{
display:none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 113, 162, 1);
color: #ffffff !important;
}
.entitylist-filter-option-text select.form-control {
display: none;
}Explanation: This adds styling to both old and new dropdowns. If you wish to change the colors for these dropdowns, you can change the color values in the CSS code.
The base code for this blog is taken from here.
5) Save the Web Page record.
6) Clear the cache. If you are an administrator, you can clear out the cache at https://<portal-url>.powerappsportals.com/_services/about
7) Now, do a hard refresh and you will see the newly customized dropdowns render on the page.
DEMO
In this post, we saw how to customize and better design dropdowns on an entity list in Power Apps Portals. This allows us to apply branding guidelines to Power Apps Portal Apps.
I hope this was useful to you. In case of any questions or suggestions, feel free to reach out on Twitter at @agarwal_ritika.