Uncategorized

Custom Per-Partner Branding in Power Pages – Part 1: Data model

A common ask with partner portals is to adapt the styling to include the partner’s logo and use their brand colours.

In this session, we’ll create the data model and complete the following in preparation for the portal aspects:

  • Create an Image column for the logo
  • Add text columns to store the hex colours for primary and secondary colours (in my implementation, I’ll use the primary colour as the navbar background and the secondary colour for links and text)
  • Install and apply a Colour Picker custom component from https://pcf.gallery to simplify colour selection (and make it more fool-proof!)

Installing a Colour Picker Control

In preparation for our colour columns, install a colour picker PCF control. I’ve used Rick A. Wilson’s Colour Picker. Here’s where you can find the managed solution or import:

https://github.com/rwilson504/PCFControls/releases/latest/download/ColorPicker_managed.zip

Here’s how to import and publish the managed solution

Open the maker portal at https://make.powerapps.com

Select the required environment (where your portal lives)

Select Solutions from the left nav menu

Power Apps maker portal. Select an environment. Select Solutions. Select Import Solution

Browse to ColorPicked_managed.zip and click Next then Import

Once you receive confirmation that the solution has been imported successfully, click to open the solution

Power Apps maker portal. Confirmation message that solution imported successfully. Solution name 'ControlPicker' highlighted

Click Publish All Customisations

 

Customising / extending the Account table with branding columns

Here’s a managed solution with the account table customisations equivalent to the end result of this session if you’d rather just install and head straight into the Power Pages goodness:

https://francomusso.com/wp-content/uploads/2022/11/PartnerBranding_2022_11_12_1454_managed.zip

Note – this is dependent on the PCF control above. Also, rather than interfere with your existing Account form, I’ve created a separate one called Partner Portal Branding

Otherwise, here’s how I made those customisations…

Create a solution and add the account table

Create a new solution called Partner Branding

Power Apps maker portal. Select New Solution. Call it partner branding. Select a publisher

Open the solution and select Add Existing > Table

Power Apps maker portal. Within solution, select Add Existing Table

Select Account and click Next

To populate our branding fields, we’ll need to update the account form

Add Existing Tables dialogue in Power Apps maker portal. Select Account. Select next

Click Select Objects

Select the Forms tab and tick to select the Account main form

Click Add

Power Apps maker portal. Account form selected for adding to solution

Click Add (again)

Click to open the Account table

 

Create an Image column for the logo

Select Columns

Click New Column

Power Apps maker portal. Adding a new column to the Account table

In the Data Type drop-down, select File > Image

(Optional) Tick to select Primary Image

Expand the Advanced Options

Type 1024 in the Maximum image Size field

Tick the Can store full images checkbox (without this, your images will be cropped to a 144px x 144px square)

Click Save

Power Apps maker portal. Adding a new Image column called Portal Branding Logo. Description reads "Used for per-partner branding in the portal"

 

Create text fields to store the branding colours

Click New Column

Leave the default data type as Single Line of Text

Click to expand Advanced Options

Set the Maximum Character Count to 7 (We’ll be storing the hex colour in a format like #0B46A7)

Click Save

Repeat these steps for the secondary colour

 

Add our branding fields to the account form

Note – feel free to create a new form rather than experiment with your existing account form

Select Forms from the left nav menu

Add the branding fields to the Account table

Select Forms in the left navigation

Click to open the Account form

Power Apps maker portal. Select Forms for the Account table. Highlighting where to add a new form or open an existing form

Add your newly created fields to the form. I chose to add them in a new section above the timeline

Click Save

Form designer in Power Apps maker portal. Highlighting a 2 column section with Logo, Primary Colour and Secondary colour. Select Save and then select Switch To Classic

 

Add the Colour Picker PCF control to the colour fields

To make our colour fields more fool-proof, we’ll add a colour picker control to these fields. This will ensure that only valid values can be selected and will provide preview swatch of the selected colour.

Click Switch to Classic

You may be nagged about why you’re switching back to the classic editor. Just click Skip

Warning – the classic editor can be very slow!

Select the primary colour field and click Change Properties

Classic form designer in Power Apps maker portal. Primary Colour field is selected and Change Properties ribbon button is highlighted

 

Select the Controls tab and click Add Control

The Add Control dialogue in the classic form designer within the Power Apps maker portal. The Colour Picker control is selected

Select Colour Picker and click Add

Select Colour Picker and select it for use on Phone, Web and Tablet

Click OK

The Field Properties disalogue in the classic form designer within the Power Apps maker portal. The Colour Picker control is selected and the Web, Phone and Tablet options are set to true. The OK button is highlighted

Repeat for the secondary colour field

Save and Publish the form

 

And that’s it, all done. Create / edit some accounts to test with and I’ll see you in the next session where we’ll get this exposed on the portal 😎

 

Franco Musso

Leave a reply

Your email address will not be published.