• Ritika Agarwal

Add design to Quick View Forms in Power Apps Portals

In this blog post, I will walk through the steps that can be followed to style the Quick View Forms added on a web page. This will enable Power Platform Developers to style the Quick View forms element which is displayed as an iframe.


Problem Statement

How to remove the right borderline from a quick view form? How to add or remove styling from a quick view form? How to highlight a quick view form in a Power Apps Portals Web page?

Solution

To update the properties of the Quick View form controls, the following class properties can be updated.


crmEntityFormView

cell

crmquickform-cell


The line which gets displayed is added in the right border as a property added in the properties of first-child by default. You can inspect the view this.


We will use the same property to customize the Quick View Form properties.


#1: Remove the line

.crmEntityFormView .cell.crmquickform-cell:first-child {

border-right: none;

}


#2: Add all borders

.crmEntityFormView .cell.crmquickform-cell:first-child {

border-right: none;

border: 10px #742774 solid;

}

In this way, you can add your own styling to the Quick View Forms displayed on a web page.

DEMO


In this post, we saw how to customize the Quick View Forms styles in Power Apps Portals pages to remove the borderline in the Quick View Form element. This will help the developers working on Power Apps Portals to provide a better user experience to the users.

I hope this was useful to you. In case of any questions or suggestions, feel free to reach out on Twitter at @agarwal_ritika.


Recent Posts

See All

Understanding Header in Power Apps Portals

In this blog post, I will break out the components associated with the Header in Power Apps Portals. Problem Statement How to customize header in a Power Apps Portals? How to hide/show navigations in