Currently there are no direct methods to enable Audience Targeting on a List or Library via script or code.

This is currently done through the List or Library Settings screen under Audience targetting settings option

When you enable audience targeting through these settings, a field is created in the corresponding List or Library called Target Audiences

Using the Get-PnpField PnP PowerShell command to get the SchemaXml property we can see how the field is constructed.

1

(Get-PnPField -Identity "Target Audiences" -List Documents).SchemaXml

This is the XML returned

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<Field 
  ID="{61cbb965-1e04-4273-b658-eedaa662f48d}" 
  Type="TargetTo" 
  Name="Target_x0020_Audiences" 
  DisplayName="Target Audiences" 
  Required="FALSE" 
  SourceID="{803a362c-54fb-47c7-83c8-e7a83a9512f8}" 
  StaticName="Target_x0020_Audiences" 
  ColName="ntext2" 
  RowOrdinal="0" Version="2">
  <Customization>
    <ArrayOfProperty>
      <Property>
        <Name>AllowGlobalAudience</Name>
        <Value xmlns:q1="http://www.w3.org/2001/XMLSchema" p4:type="q1:bo
olean" xmlns:p4="http://www.w3.org/2001/XMLSchema-instance">true</Value>
      </Property>
      <Property>
        <Name>AllowDL</Name>
        <Value xmlns:q2="http://www.w3.org/2001/XMLSchema" p4:type="q2:boolean" xmlns:p4="http://www.w
3.org/2001/XMLSchema-instance">true</Value>
      </Property>
      <Property>
        <Name>AllowSPGroup</Name>
        <Value xmlns:q3="http://www.w3.org/2001/XMLSchema" p4:type="q3:boolean" xmlns:p4="http://www.w3.org/2001/XMLSchema-ins
tance">true</Value>
      </Property>
    </ArrayOfProperty>
  </Customization>
</Field>

After some experimenting, I found that the only two columns you need to set are the ID and Type

ID needs to have 61cbb965-1e04-4273-b658-eedaa662f48d set as it’s value

Type needs to have TargetTo set as it’s value

You still need to provide values for Name, DisplayName, StaticName, but they can be whatever you want.

Don’t like the name Target Audiences then you can change it to something else. The great thing is, it can still be turned off through the List or Library settings page.

To enable Audinence targeting using PnP PowerShell it’s as simple as running this script.

1
2
3
4
5
6

$credentials = (Get-Credential)

Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/somesite -Credentials $credentials

Add-PnPFieldFromXml '<Field ID="{61cbb965-1e04-4273-b658-eedaa662f48d}" Type="TargetTo" Name="Target_x0020_Audiences" StaticName="Target_x0020_Audiences" DisplayName="Target Audiences" />' -List Documents

And to do the same thing in C# CSOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// from SharePointPnPCoreOnline Nuget package
var manager = new OfficeDevPnP.Core.AuthenticationManager();

string siteUrl = "https://contoso.sharepoint.com/sites/somesite";
string appId = "your-app-id";
string appSecret = "your-app-secret";

using (var context = manager.GetAppOnlyAuthenticatedContext(siteUrl, appId, appSecret))
{

    var list = context.Web.Lists.GetByTitle("Documents");

    var fieldSchemaXml = @"
        <Field 
            ID='{61cbb965-1e04-4273-b658-eedaa662f48d}' 
            Type='TargetTo' 
            Name='Target_x0020_Audiences' 
            StaticName='Target_x0020_Audiences' 
            DisplayName='Target Audiences' 
        />
    ";

    var field = list.Fields.AddFieldAsXml(fieldSchemaXml, false, AddFieldOptions.AddFieldInternalNameHint);
    context.ExecuteQueryRetry();
}

To turn off Audience Targeting all you need to do is remove the field from the list.

Comment and share

This post is about creating a ListView CommandSet extension which uses the the onInit method to make “service” calls.

If you want to dive straight in, the source code for this post is available from my-command-set GitHub repository.

Full details can be found on creating an Extension solution can be found on the SharePoint Framework Extension Documentation Site, but I’ve given a whistle stop tour below.

Creating an Extension project

This is done using the Yeoman SharePoint Generator in a terminal of your choice.

1
2
3

md my-command-set
cd app-extension
yo @microsoft/sharepoint

Enter the following options

1
2
3
4
5
6
7
8
9
10

? What is your solution name? my-command-set
? Which baseline packages... ? SharePoint Online only (latest)
? Where do you ... files? Use the current folder
? Do you want ... tenant admin ... in sites? No
? Will the components ... APIs ... tenant? No
? Which type of client-side component to create? Extension
? Which type of client-side extension to create? ListView Command Set
Add new Command Set to solution my-command-set.
? What is your Command Set name? SecurableCommandSet
? What is your Command Set description? SecurableCommandSet description

Wait for Yeoman to do it’s thing…

And then wait a little longer…

I use Visual Studio Code so if you’re joining me on this journey…

1

code .

Hopefully you’ll see these files in your repo

First of all lets setup the CommandSet in the manifest.

• Navigate to src\extensions\securableCommandSet folder
• Open the SecurableCommandSetCommandSet.manifest.json file

Updating the project files

Remove the two commands that were created with the project

1
2
3
4
5
6
7
8
9
10
11
12

"items": {
  "COMMAND_1": {
    "title": { "default": "Command One" },
    "iconImageUrl": "icons/request.png",
    "type": "command"
  },
  "COMMAND_2": {
    "title": { "default": "Command Two" },
    "iconImageUrl": "icons/cancel.png",
    "type": "command"
  }
}

Replace them with the command that’s going to be secured

1
2
3
4
5
6
7

"items": {
  "CMD_SECURE": {
    "title": { "default": "Secret Command" },
    "iconImageUrl": "data:image...",
    "type": "command"
  }
}

Full base64-encoded image is included with source code

Next open up SecurableCommandSetCommandSet.ts

Add a private field to the classe to store the visibility of the command.

1

private isInOwnersGroup: boolean = false;

We want to make sure the command is only visible to people who are in the Owners group of the site we are in.

This is done in the onListViewUpdated method of the SecurableCommandSetCommandSet class.

Below is the code added when the project is created.

1
2
3
4
5
6
7
8

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  if (compareOneCommand) {
    // This command should be hidden unless exactly one row is selected.
    compareOneCommand.visible = event.selectedRows.length === 1;
  }
}

Replace it with following

1
2
3
4
5
6
7
8
9

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  const compareSecureCommand: Command = this.tryGetCommand('CMD_SECURE');
  if (compareSecureCommand) {

    compareSecureCommand.visible = this.isInOwnersGroup;
  }
  
}

Install the PnP client side libraries as we’re going to need some of their magic in this solution

1

npm i @pnp/sp @pnp/common @pnp/logging @pnp/odata --save

SharePoint Groups and their members aren’t available in the BaseListViewCommandSet.context property, so we’re going to need to load them.

The problem is that this will have to be done using Promises and onListViewUpdated doesn’t return a promise.

Luckily we have the onInit method for this (returns Promise<void>). This method gets called when you component is initialised (Basically when the list view is loaded up in the page). Anything in the onInit method will run before the commands are rendered, similar to the actions you’d run in the componentWillMount method of a react component.

To use the pnpjs library it needs to be initialised first and this needs to be done in the onInit method.

Add the import statement

1

import { sp } from "@pnp/sp";

Replace the onInit method with the following code, this sets up the sp helper with context of the Extension and then to call into the SharePoint Groups in the site, we’re going to have to await away in the onInit method again to call into the site and set the isInOwnersGroup field.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@override
public async onInit(): Promise<void> {

  await super.onInit();

  await sp.setup({ spfxContext: this.context });

  const email: string = this.context.pageContext.user.email;
  const ownerGroup: SiteGroup = sp.web.associatedOwnerGroup;
  const users: SPUser[] = await ownerGroup.users.get();

  this.isInOwnersGroup = users.some((user: any) => user.Email === email);

  return Promise.resolve<void>();
}

For the observant people out there, you may notice that I’ve declared user as any. For some reason, the users collection returned has UpperCamelCase properties and the TypeScript reference is using lowerCamelCase, which was causing a TypeScript compile error. Hence the user.Email === email rather than user.email === email in the some function call.

In this snippet of code, we’re getting the login of the current user, the associated owner group of the site and then getting the users in the group.

The some function determines if the user is in the group and it’s result sets the isInOwnersGroup.

Finally an update is needed on the onListViewUpdated method to show / hide the command.

1
2
3
4
5
6

const compareSecureCommand: Command = this.tryGetCommand('CMD_SECURE');

if (compareSecureCommand) {

  compareSecureCommand.visible = this.isInOwnersGroup;
}

Add the new command to the onExecute method to make sure it gets picked up in the switch statement

1
2
3
4
5
6
7

switch (event.itemId) {
  case 'CMD_SECURE':
    Dialog.alert("Shhhhhh! It's a secret...");
    break;
  default:
    throw new Error('Unknown command');
}

Now we’re ready to gulp serve

Open up serve.json in the config directory

Change the two pageUrl properties to a list in your tenant

1

"pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx"

Currently there is a bug in tenants that are on First Release that stops gulp serve working correctly. If you can’t see your command then switch to Standard (not always instant!), if it still doesn’t work then try deploying without the --ship paramter. See all the details on the sp-dev-docs GitHub repository

Make sure you account is in the Owners group (It won’t be if you created a “groupified” team site).

If all is good your new CommandSet should appear on the top menu and will show the alert message when clicked.

Summary

Getting the SharePoint group users is just an example of how you can use the onInit method to call into other services, like custom web apis, MS Graph, etc.

Remember that this could effect the load time of your command, which may effect the user experience. The context menu may not be on screen for long, so your menu may have not loaded before it’s gone.

Useful Links

• Build your first ListView Command Set extension
• Convert your images to base64

Comment and share