Pass the value from a SharePoint 2013 Target Audiance Picker using jQuery

Let start by explain the scenario and the reason I wanted to do it this way.

I have a customer that uses Audience targeting on the news. As the customer has multiple company’ that share the same intranet they use an Audiences to show aimed news on the start page. Etch Audience is connected to a security group that contains etch company’s employees. This means that in this scenario we have Audiences looking like, Company Name 1, Company Name 2 etc.
This works very well but now they want a News Archive that is filtered on company name (Everyone should be able to see all news, so we can’t use Audience Targeting).

As you might know you can’t filter on the column Target Audience so my idea was to copy the Audiences filed value to a Custom Site Column that i create in my “News” Content Type. Then i can filter on my Custom Column when i set up my News Archive.

So why is this a big problem you ask yourself… I will explain…

The Audience Targeting picker is not a normal textfield or input, it is a big mess of divs, spans and textfields etc.

It looks like this (Simplified)

As you can see, for etch Audience i add it creates a new span width the class “ms-entity-resolved”, within that span it creates a second span width ID “content”. So a typical jQuery script that pass the value from one input to another like this, won’t work.

Now let me get to the how and what i did.

In my custom news page layout i added the two filed that i needed. (I already had the Audiences filed.) The Audience filed and the TextField “HiddenNewsCompany”. These two will display the inputs in the page edit mode.

In the end of the page layout i added the following script. (Explained in the code)

Now as soon a Audience is resolved it get passed to my Custom HiddenNewsCompany field.

The last thing i did was to hide my HiddenNewsCompany filed as i don’t want my customer to see it. You can’t use hidden on the filed in the page layout or use display:none in CSS as that will remove the div, so just use the following in the CSS.

I have written some pointers on how to create custom page layouts in this article. Let me know if you think i need to add a better tutorial for changing page layouts.

Please feel free to advice on better/simpler solutions, i know there are some 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *