Wed, 01/26/2022 - 05:50 By Nguyen Thanh Khoi Reviewed By Lloyd Sebag
3 comments
Workaround to have global CSS in PowerApps

Workaround to have global CSS in PowerApps

Cascade Style Sheet or CSS in PowerApps is a capability that I wish will be part of a core feature of PowerPlatform someday. CSS has gone far past mere aesthetics to create unparalleled versatility. CSS is not only used, contrary to common opinion, to provide a web page with a simple style to make it appear more appealing. There are lots of other things that one can also do with CSS. 

With PowerApps, we wish there is a direct method to apply CSS to the App that we are building. Anyone who knows WordPress can feel that a simple additional CSS feature that comes with it empowers us to optimize every visual element on your site.

While Actual CSS is not possible, there are few things that we can do:

  1. Create a pseudo CSS by creating an object and defining styling values.
  2. Using inline CSS in HTMLText  
  3. Create Themes to pre-define style.

1. Create a fake CSS by using global variable to define styling value

The idea is to leverage the global variable in PowerApps to create a variable object defining the styling value. Then we will re-use this object in multiple components such as: button. line, table ,...

Create global variable by define an object when App OnStart

Workaround to have global CSS in PowerApps

Then create an object to store all styling you want. For example:

Set(ButtonCSS, {
FontFamily: Font.'Segoe UI',
BackgroundColor: RGBA(2, 67, 57, 2),
BorderThickness: 7,
Color: RGBA(255,255,255,1),
Padding: 1,
TextAlign: Align.Center
});

Now let's try with components:

  • Button: Create an button then set style for button using global variable that we already created with attributes:
    • Border Thickness: use Borderthickness from global variableWorkaround to have global CSS in PowerApps
    • Font: use FontFamily from global variableWorkaround to have global CSS in PowerApps

       

    • Background: use background property from global variableWorkaround to have global CSS in PowerApps

       

  • Table: we could do the same way to set styling for table. For an example, I create an object TableCSS with property Background then set it to HeadingColor of an Table and I got the result as following:Workaround to have global CSS in PowerApps

     

2. Using CSS in HTMLText

Microsoft provides a component named HTML Text which could store an HTML code inside and display as browser and it leads to we could use CSS inline for sure. Thus, we will have 2 approaches with using HTML Text component:

  • Using CSS inline: The pros of this way is we could use HTML code which we are very familiar with.CSS inline

     

  • Define an variable to store CSS then re-use as CSS inline for various components: One of the biggest disadvantage of using CSS inline is reusability because we must copy the same styling for each components and it leads to increase huge time cost when we want a change for UI. Hence, we could define an global variable storing styling then use it in CSS inline. For example:
    • Define an styling variable OnStart event of PowerApps.Workaround to have global CSS in PowerApps
      Set(
          myStyle,
          "color:Red;font-size:16px;text-align: center"
      );
    • Set CSS inline by using this global variable: we could use a trick is concat string to build a fully HTML text which is able to contains CSS inline from global variable.Workaround to have global CSS in PowerApps

 

3. Theming components

In this part we will have look at themes of Canvas Apps. The theming components help ensure that makers can focus on what matters the business logic and problem they're trying to solve and users can have a consistent experience when using apps. We will use CoE Starter Kit which published by Microsoft to create a theme for our apps.

3.1 Set up theming components:

Prerequisites: The Power Apps theming solution contains Power Apps component framework elements. Publishing of canvas apps with code components must be enabled for the environment.

  1. Go to Power Platform admin center
  2. Go to your environment
  3. Select Settings
  4. Select Product -> Features
  5. Make sure Allow publishing of canvas apps with code components is enabled.Enable publish

     

Import the CoE Starter Kit Solution:

  1. Download the solution named Theming_x_x_managed.zip here which x_x is the version and it is up to date by MS.Download solution

     

  2. Import the solution named Theming_x_x_managed.zip
  3. Publish All customization
  4. After import successfully, there are apps as followingApps after imported

     

3.2 Create your own themes

  • Select CoE Theme Editor App and Click Play. Theme Editor provides an overview of existing themes, and users can edit a theme or create a new one.
Workaround to have global CSS in PowerApps
  • Because you have not created any theme so the list of avaiable themes is empty. Click Create new theme to create new one.
     
Workaround to have global CSS in PowerApps
  • Use the styles (color picker, font picker) to create the style and see a real-time preview of the theme as you're editing various colors, fonts, and sizes.new theme
  • After you've finished authoring the theme, select Publish Theme. Here, theme designers will need to update the AppTemplatePhone.msapp and AppTemplateTablet.msapp files, and upload them. This step ensures that the app template will be ready to be used by makers.publish theme
  • Now open the app: AppTemplateTablet or AppTemplatePhone (in Edit mode) which included in imported solution Theming_x_x_managed.zip to create an app using your own theme
  • Select App > OnStart, and replace the first line in the formula with the new formula you copied from Theme Editor. Make sure you don't replace any other formulas in the OnStart function and that the line ends with a semicolon.Set new themeYou need to replace the name of theme that you want to apply for app with "MyTheme" because "MyTheme" is the name of my own theme and you will not have it own your environment unless you put the same name.
  • Now you could create components which style you already define.Result

     

4. Conclusion

PowerApps is a low-code app which built for a simple system and expeditious implementation. So it will not contains fully-features to replace an web application and CSS is an missing now. We expect more to come on the platform itself in the future so let's hope for update from Microsoft. In the meanwhile, this is how you can somehow implement the CSS like an attribute in PowerApps..

Workaround to have global CSS in PowerApps

Comments

Hi,

Great article.

One question about this:
When I use this in my apps, and I export my apps inside a managed solution to another environment, I need the "Theming_2.4_managed" solution in my target environment with the same unique theme name as I use in my dev environment correct?

Wed, 01/26/2022 - 20:29
Dennis (not verified)

Add new comment

Image CAPTCHA
Enter the characters shown in the image.