Components - Part 2 - Theme Component - Add Security

[KC]

Part one of this series: https://powerusers.microsoft.com/t5/Community-Blog-Staging-Private/Components-Part-1-Build-a-Theme-C... 

Save to a SharePoint list!

A SharePoint list is a good option where you need the app theme to be consistent for all apps. For when you wish to have a central location where you can make a change and have that change cascade to all instances of your app or apps. Useful for Online Scenarios!

Useful in scenarios where your organization changes branding, changes the company color schemes.

I've only gone through this twice but it was a pain to upgrade all my apps one at a time to the new brand guidelines.

By storing the Theme settings in a central location such as SharePoint, all your app settings can be updated automatically just by changing a value in the list.

First let's modify the ThemeTool component to detect if the user is Online or Offline, this will determine if we should show or hide the Save to SharePoint Button. 

NOTE: If the SharePoint button is enabled, in this instance I would also want to only allow someone with the proper permissions to save a Theme to SharePoint, other wise, anyone would be able to make a change and have that change cascade to all app instances that use the ThemeTool throughout the enterprise, each overwriting the other persons changes.

Are we On or Off Line?

We need to detect this in our Parent since that is where our connections are.

Then we pass a parameter into our ThemeTool Component with the value of Online set to true or false, I randomly chose those values, you could pass a value that makes sense to you.

In the ThemeTool component we need to create an Input property of type Boolean

Back in the Parent app, in App OnStart property we need to detect if we are on or off line.

Thanks to the hard work of the PowerApps team we can use the built in function Connection. Thank you PowerApps Team!

// Detect if we are Online or Offline
If(
    Connection.Connected,
    Set(
        Online,
        true
    ),
    Set(
        Online,
        false
    )
)

While still in the Parent app, we set the ThemeTool components OnOffLine property to Online.

Next we need to set the visibility property of the Save to SharePoint Button and the Buton label to the ThemeTools Input property OnOffLine 

In the ThemeTool Component!

Set the Visible property for both the Save to SharePoint Button and label to ThemeConfigurator.OnOffLine

In my example the ThemeTool is internally called ThemeConfigurator

Test Offline Mode!

Put your device into Airplane mode.

Save and Publish the PowerApp.

Launch the PowerApps player and the app icon or if you've pinned it to your home screen click the icon there.

The Save to SharePoint Button and label should not be visible.

Turn Airplane mode off and launch the app once more and the Save to SharePoint Button and label should be visible.

User Permissions!

This is a topic worthy of a post all it's own but I will try and keep things simple here.

At the very least in SharePoint I would create a group, I called my group "Branding" and assign the Contribute permission to the "Branding" group and then add the responsible people to the"Branding" group.

A better more manageable approach in my opinion would be to create an Active Directory Security Group, something like BrandingSecurityGroup and set it's criteria to automatically add the responsible persons based on some criteria, for instance the department they were hired into, i.e the Marketing Department. You could add as much detail to the Criteria as you need, but this could become very complicated, so I will just go with a department for now.

NOTE: In my employers Active Directory we use a hybrid network, I can add the criteria from the On Premise side of Active Directory but in my Azure Portal I use for testing I only have permissions to create a Security Group of type Assigned, meaning I have to manually add someone to the group.

Not sure why I cannot create a Dynamic group at this time, I will need to look into that.

Anyways, now I would only add the BrandingSecurityGroup to my SharePoint Branding Group. This way when someone is hired into or leaves the Marketing department their access to the SharePoint list is granted or revoked automatically.

This is the approach I will talk about here.

• Create a SharePoint list called Branding.
  Fields:
  
  
• Create a SharePoint Group called Branding and assign the Contribute permisson to the group.
• In the list settings, Permissions for this list , make sure the Branding SharePoint group is added.
• Create an Azure Active Directory Security group called BrandingSecurityGroup, the only member of this group is my main account at this time.
• Add a TestUser account in Azure Active Directory, this user will be used for non priviledged access, this user is not a member of the BrandingSecurityGroup therefore this user will not have permission to add to the Branding SharePoint list.
• Add the BrandingSecurityGroup to the SharePoint Branding Group

But how do we determine the users permissions from the PowerApp?

We could use a custom connector, Azure Functions, Flow but for this post I'm using the Office365Groups connector.

In your PowerApps Portal under Data - Connections add the Office365Groups connector if it is not already present.

In the App - OnStart add the following:

// Replace the [SecurityGroup Object id] 
Office365Groups.ListGroupMembers([SecurityGroup Object id]).value)

Office365Groups connector documentation: https://docs.microsoft.com/en-us/connectors/office365groups/

In the ThemeTool component we need to add a new boolean Input property called SharePointAccess

We also need to change the Save to SharePoint Button and label Visible property:

ThemeConfigurator.OnOffLine

with 

ThemeConfigurator.OnOffLine && ThemeConfigurator.SharePointAccess

In the Parent, App - OnStart property add the following after where we detect if we are connected or not:

// Detect if we are Online or Offline
...

ClearCollect(
    BrandingSecurityGroup,
    Office365Groups.ListGroupMembers("[GROUP OBJECT ID]").value
);
If(
    Office365Users.MyProfile().DisplayName in BrandingSecurityGroup.displayName,
    Set(
        SharePointAccess,
        true
    ),
    Set(
        SharePointAccess,
        false
    )
)

While still in the Parent app, select the ThemeTool and open the Advanced Property panel.

Add the SP variable SharePointAccess to the ThemeTool property SharePointAccess

In Summary:

When the app starts:

1. We the Office365Groups to retrieve the members of the BrandingSecurityGroup
2. Store the Office365Groups return values in a Collection of the same name,BrandingSecurityGroup.
3. Call the Office365Users connector for the current login and determine if the Office365Users.displayName of the current login is a member of our BrandingSecurityGroup Collection. 
4. Set the variable SharePointAccess to either true or false depending on if the current login is a member of our security group.
5. Pass the OnOffline variable value along with the SharePointAccess value to our ThemeTool component to show or hide the Save to SharePoint Button and label. Both the OnOffline and SharePointAccess variables must be true in this case.

SharePoint!

There is slight issue to address before we start saving the data to the list. The component is not able to communicate with the SharePoint Connector. The SharePoint Connector is added to the Parent, the container app, not the component. The component can only communicate with the Parent via Input and Output properties.

We need to copy and paste the Save to SharePoint Button and the label to the Parent app then delete them from the ThemeTool component. 

Now we need to change both of these controls Visible properties from

ThemeToolOnOffline && ThemeTool.SharePointAccess

to

Online && SharePointAccess

In the ThemeTool component we need to add some additional Output properties

then set eachs value accordingly.

Switch to the Property panel Advanced Tab and add the following:

Let's go back to the Parent app, select the Save to SharePoint Button and add the following to it's OnSelect property:

// Update the SharePoint Record
Patch(
    Branding,
    First(
        Filter(
            Branding,
            ID = 1
        )
    ),
    {
        Title: "New Theme",
        AppHeader: ThemeTool.HeaderHexValue,
        AppFooter: ThemeTool.FooterHexValue,
        ButtonFill: ThemeTool.ButtonHexValue,
        ButtonTextColor: ThemeTool.ButtonTextHexValue,
        GalleryControlFill: ThemeTool.GalleryHexValue,
        AppCanvasColor: ThemeTool.CanvasHexValue
    }
)

Here we only want one record in SharePoint, therefore we filter the connection for record with the ID of 1.

Now Save the changes.

Launch the app, make some changes and verify in SharePoint the record is updated accordingly.

To reflect the values saved to SharePoint instead of the SavedTheme colors we simply change each components Input property or in the case of the buttons and Canvas we change their fills.

Header Component, change the Input property HeaderBackgroundColor

From

First(SavedTheme).HeaderBackground

To

If(SharePointAccess, ColorValue(First(Branding).AppHeader),First(SavedTheme).HeaderBackground)

If we have SharePoint Access we surface the SharePoint list value otherwise we surface the SavedTheme value.

There's no need to check Online status, if we are Offline, SharePointAccess will be false, if the current login is not in the BrandingSecurityGroup, SharePointAccess will be false.

Change the Button control Fill:

From

First(SavedTheme).ButtonColor

To

If(SharePointAccess, ColorValue(First(Branding).ButtonFill),First(SavedTheme).ButtonColor)

Repeat for the other Components and Controls accordingly.

In Summary:

We created a SharePoint list, setup the Save to SharePoint Button to save the ThemeTool settings, verified the current login against our Azure Active Directory Security Group. Determined whether to use the SaveTheme or the AdminTheme in SharePoint.

This is not exhaustive but I hope you find this useful!

Attached is a small component library containing the Header, Footer and ThemeTool in this post.

Setup:

Add the following Connectors:

1. SharePoint
2. Office365Users
3. Office365Groups

In the Parent App OnStart property replace the ObjectID place holder 

Office365Groups.ListGroupMembers("Azure Active Directory ObjectID").value

with your Security Group ID

ThemeTool_20190303141047.zip