The Stylesheet property is one of the the base controls provided by the WebControls API, and is therefore automatically available to any app that uses the API. It lets you override appearance attributes set by the CSS of a web site. This allows you to achieve a customized look for WebControl-based apps running within your ViewApps. For example, you may wish to set the background color of different web sites running in your apps to provide a more unified look.

To expose the Stylesheet property at design time in your app, include it in your AppManifest.xml file. The Stylesheet property is type string. It is not used to link to an external CSS or other file type. We recommend that users set this a static property at design time to avoid issues at run time. If necessary, the property can be set dynamically during run time by scripting (via a ShowScript), or by binding to an attribute, but keep in mind the following:

• If the property is set dynamically during run time, the web engine must be reinstantiated and the old web engine instance closed and recreated.
• The property is set during initialization, before the web engine is created.
• This reinstantiation process may result in the loss of the prior state of the web page.

Users of your app can set the Stylesheet property in the Property grid of the Layout Editor, once they have added your app to a pane. From the Property grid, the Stylesheet property can be set as:

• A direct value as a static configuration
• By data binding. The value of the data binding reference string must be a css text string.

To script an override for the Stylesheet property, use a layout script. An OnShow trigger is recommended. Examples of using both the property grid and scripting are shown under "Examples."

Note that only apps that use the WebControls API can use the Stylesheet property to override CSS stylesheet properties. Examples of bundled OMI apps that use the WebControl API include:

• MapApp
• SharePoint app
• WebBrowser app
• InSight app

Examples

When configuring an app, a user enters a string in the Stylesheet property at design time. Here, to change the background color of google.com when rendered in a ViewApp, the user enters "div ( background-color:purple; )."

The web site is rendered with a purple background at run time by the WebBrowser app in the ViewApp.

A user can also use scripting to obtain the same result. Here, an OnShow layout script is used to set the background color to green. When using scripting to set the Stylesheet property, remember that the web engine must be reinstantiated and the old web engine instance closed and recreated. Reinstantiation may result in the loss of the prior state of the web page.

Additional scripting examples:

Set Style Overrides for WebBrowser App Linked to Microsoft Teams

The WebBrowser app is configured to point to Microsoft Teams, as shown in the scripting example. A user-defined namespace and attribute, "MyViewApp.DemoApp.themeColor," has been added that carries the theme color.

Property Grid:

div.app-header-bar.app-bar-app-header-bar-common { background : " + MyViewApp.DemoApp.themeColor +"} nav.app-bar-items.app-bar-width.app-bar-app-header-bar-common.simple-scrollbar.apps-overflow-enabled {background : " + MyViewApp.DemoApp.themeColor +"};

Scripting:

MyContent.WebBrowser_Teams.StyleSheet = "div.app-header-bar.app-bar-app-header-bar-common { background : " + MyViewApp.DemoApp.themeColor +"} nav.app-bar-items.app-bar-width.app-bar-app-header-bar-common.simple-scrollbar.apps-overflow-enabled {background : " + MyViewApp.DemoApp.themeColor +"}";

Set Style Overrides for WebBrowser App Linked to Microsoft Power BI

The WebBrowser app is configured to point to Microsoft Power BI, as shown in the scripting example.

Property Grid:

outspace-pane {display: none; visibility: hidden;} ul.pane.sections.ng-star-inserted{background-color : #3D1152} li.section.static.selected.ng-star-inserted { background-color :#C530FF; color:White; border-bottom: 5px solid white;} rect.bar.setFocusRing{fill: #3D1152;} div.vcHeader.themableBackgroundColorSolid {visibility = hidden;} div.visualTitle.themableBackgroundColor.themableColor.ng-star-inserted {font-size: 35pt; text-align: center; height: 10;};

Scripting:

MyContent.WebBrowser_PBI.StyleSheet ="outspace-pane {display: none; visibility: hidden;} ul.pane.sections.ng-star-inserted{background-color : #3D1152} li.section.static.selected.ng-star-inserted { background-color :#C530FF; color:White; border-bottom: 5px solid white;} rect.bar.setFocusRing{fill: #3D1152;} div.vcHeader.themableBackgroundColorSolid {visibility = hidden;} div.visualTitle.themableBackgroundColor.themableColor.ng-star-inserted {font-size: 35pt; text-align: center; height: 10;}";

Set Style Overrides for InSight ChartControl App

Here, style settings in the InSight ChartControl App are overridden, as indicated in the scripting example.

Property Grid:

path.line.events-attached { stroke : purple;} div.legend-item.flex-100 { visibility : hidden};

Scripting:

MyContent.InSightChartControl1.StyleSheet = "path.line.events-attached { stroke : purple;} div.legend-item.flex-100 { visibility : hidden}";