Pass data (other than search results) from Server side Content By Search WebPart to Client side template in SharePoint 2013

In some situations in Content By Search WebPart (CSWP) there could be a scenario when we may need to pass data to client side other than the search results itself to achieve some functionality. This passed value may have to be accessed in client side control template to achieve some flow.

 Here are few hints how to achieve this.

CSWP has a protected property called AppManager of type ScriptApplicationManager. AppManager.States is a dictionary through which values can be passed on to client side control.
AppManager is a protected member hence we would need to extend the CSWP to access it.

On server side use -

AppManager.States.Add("samplekey","samplevalue");

To render values to client side

On client side use -

ctx.ScriptApplicationManager.states.samplekey

To access the value

Example - In a CSWP displaying a list of products, there is a requirement to highlight products of type "Laptop"

 Server side -

1. Extend CSWP and add below code

protected override void OnLoad(EventArgs e)       

{         
this.QueryGroup.DataProvider.BeforeSerializeToClient += this.DataProvider_BeforeSerializeToClient;

base.OnLoad(e);

}

 private void DataProvider_BeforeSerializeToClient(object sender,ScriptWebPart.BeforeSerializeToClientEventArgs e)

{           
this.AppManager.States.Add("ProductType","Laptop");

 }

Client side -

1. Make custom control template and item template. Use these templates in the extended CSWP.
2. Add the below line to access  the value

var productType = ctx.ScriptApplicationManager.states.ProductType;

 productType will have value of "Laptop" now

 In the item template use script to check and highlight all the rows of type laptop