Dynamically Change logo in Power Apps Portal

[pankaj1138]

Hi Experts - We are developing Power Apps Portal for B2B customer and having a requirement to display customer specific logo in portal for every B2B customer login. Can you please suggest, how dynamically we can achieve this requirement ?

Thanks

Pankaj

[joaodsantos]

Hi,

I'm guessing you are using the account - contact relationship so you should be able to configure the image/logo field on the account and then display that field as an img component on the portal based on who's logged in. Have a look at this on how to do it: https://learn.microsoft.com/en-us/power-apps/developer/data-platform/image-attributes

Hope that helps

[pankaj1138]

Hi , Issue is not with storing the logos ... we can store it in web files inside portal management app as well. question is here, where we need to write the logic to fetch the images and show in portal header left side dynamically.

Thanks 

Pankaj

[ragavanrajan]

Hi @pankaj1138 

Once you upload the image as a web file. 

In the portal management app: 

1. Under content> web templates > look for "Header" 

2. Choose the appropriate website 

You can use a liquid templating language using user object 

official URL: click here  

you can also mix and match liquid and JS together and the page > localised content > custom JS 

Sample below. The idea here is if the user belongs to a specific web role (company) then you can display logo dynamically based on the web role. 

$(document).ready(function () {
    var roles = "{{ user.roles }}";
    console.log(roles);
    if(roles.contains("Administrators") > 0)
        alert("I am Admin");
});

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[GauravPandey]

Hi Pankaj,

There is a content snippet 'Mobile Header' that loads image in the portals by default.

You can update the Header template as suggested by Raghav with your logic to update the image dynamically.

You can 

1) create web files with different brand image attached as notes.

2) create html content snippets per brand and refer the image there.

3) Lastly in the Header you can use the liquid if else to include your snippets according to your condition.

{% if user.roles contains 'Role1'%}

{% editable snippets "Brand1" %}

{% elif user.roles contains 'Role2'%}

{% editable snippets "Brand2" %}

{% elif user.roles contains 'Role3'%}

{% editable snippets "Brand3" %}

{% endif %}

[GauravPandey · Accepted solution]

You can add the above logic in the Header within the highlighted div

[pankaj1138]

Thanks @GauravPandey , this worked.

[GauravPandey]

Cheers!