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

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

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

Open the solution and select Add Existing > Table

Select Account and click Next

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

Click Select Objects

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

Click Add

Click Add (again)

Click to open the Account table

 

Create an Image column for the logo

Select Columns

Click New Column

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

 

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

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

Click Save

 

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

 

Select the Controls tab and click Add Control

Select Colour Picker and click Add

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

Click OK

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 😎