Custom Stylesheets

[michowl]

I'd love to be able to define and use a custom stylesheet. It would make styling a lot of similar elements much faster.

For example, if I have a list of cards that each has a Header, some text and an Icon, I can set a reference on each one to StyleSheet.Sheet2.Card.Header

StyleSheet.Sheet2.Card.Body

StyleSheet.Sheet2.Card.Icon

Right now, I'm having to go through each one, and manually refer each element of the style to a "source" element in the page. eg:

PaddingLeft = Card1Header.PaddingLeft

... and so forth for every style element of every item of every page.

[michowl]

To follow up on this,

I'm currently using a collection to store a "stylesheet" of sorts, as is recommended by the blog post:

https://powerapps.microsoft.com/en-us/blog/giving-consumers-color-and-text-size-configuration-option...

However, I should clarify that what is really needed is the ability to configure the default for the whole file, much the way that the themes selector works: default file size, color scheme, padding, etc.

The issue with the collection stylesheet is that it still involves manually adding references to every single property of every single object I want to style.

An alternative would be to use classes and IDs  like classic CSS stylesheets, so that at least I'd only have to change one or two properties per object.

[Med44]

I agree with this idea. Another way maybe to multi-select objects and have the availability to put the same value to some parameters . For example: padding, color, size, X or Y localization

[Sone]

Agreed. It's utterly painstaking to have to manually adjust the stylistic properties of every object, particularly when creating multiple branded applications for intra-client use.

[fbxiii]

My company have just moved into looking at how we could use Apps in the business. I have started to design a couple of Apps and as per this idea, it would be great if I could customise a theme to fit in with my Companies branding rather than completely having to restyle each page as it is built.

[mr-dang]

 Yes. I am in favor of come CSS or some basic styling controls.

[henrihietala]

This is indeed a needed feature. I prefer using something like CSS for this kind of purposes as well!

[fbxiii]

I am trying to attempt this by the use of an imported excel spreadsheet formatted as shown below.

ID_No | Object_Type         | Hex_Colour

1         | Title_BackGround | #405BA3

As a test, I have created a new screen and added a button with a Collect statement to get the values from the excel sheet: Collect(Styles,Style_Table)

My thinking is that I can use a filter on this collection to pull the required Hex value for the Title background but I cant figure out the correct syntax. Can anyone assist with this?

My plan is to use this for all of the objects and borders, font, etc.

I am trying to put a filter in the Fill colour for the Title rectangle; Filter(Styles,Object_Type = "Title_Background") but cannot figure out how to pull the Hex value using this method.

Maybe I could somehow get the collection to load against variables instead?

[mr-dang]

Hi @fbxiii,

I can help with this.

You're very close to a solution. You just need one more step.

The Filter() function filters a table, but it returns a table. 

1. What you want to do next is narrow that down to a record (one row in that table). So around your filter formula, use First(). This will select the first record that satisfies the filter.
2. But that still returns a record full of information in multiple columns. You only want one column. So you can specify which column from that record you want returned by using a period (.) then the name of the column you want. Now you're at the cell level of a table.

First(Filter(Styles,Object_Type = "Title_Background")).Hex_Colour

The formula above will return the single hex colour in Styles that matches "Title_Background."

For more information on the different levels of data, you can watch a video I made that distinguishes table, record, and value:

https://www.youtube.com/watch?v=svWMKEvDLDY

Bonus: 

You can also use LookUp to achieve the same thing:

LookUp(Styles,Object_Type = "Title_Background",Hex_Colour)

By default, LookUp will match the condition and select the first record, so it is equivalent to First(Filter()).

There are advantages to using LookUp()--you can return a concatenation of columns, but I generally prefer Filter() as I can modify how many records I want returned using FirstN, LastN, First, and Last.

Let me know if this helped.

[fbxiii]

Thanks mr-dang, that worked 🙂 I'll put the Collect in the OnStart event now and try and add some more objects like the Font and it's Colour. I had another thought that this would also be a good way to pass adjustable parameters into an App and will be useful in another Application I have to build.

[fbxiii]

I decided it was easier to use our recommended colour pallette instead as I can just refer to each colour when needed rather than assigning colours to certain objects.

So instead of having an 'Object_Type' in my excel sheet, I am now using Style_Name and then listing the different colours. 

For example: 

ID_No | Style_Name         | Hex_Colour

1         | Corporate Blue    | #405BA3

2         | Corporate Cyan   | #84B8DA