Good Framework to handle Caml in SPFx

Good Framework to handle Caml in SPFx

I usually use PnP JS to make my calls in a SPFx Webpart, this is a great framework, you can expand lookup fields simple and clean. The problem is you cannot use Project Fields in order to query 2 levels, let’s start with an example:

 sp.web.lists.getByTitle("WorkshopResult")"Participant/Id, Workshop/Title, Workshop/Date1")
.expand("Workshop", "Participant")
.filter("Participant/Id eq '" + id + "'") 

In this case you are expanding Title from Workshop and Id from Participant, what about if Workshop have a relation with a City List? in this case you have to use projected fields to query a List from another List

Projected Fields

From Microsoft, an example

    ShowField='Title' />

I’m exploring a framework CamlJS from Andrei Markeev in order to smooth the user experience in TypeScript in a ReactJs WebPart. This framework was originally developed for JavaScript, so I ended up with some problems.

First the result of the Caml Query add a perfix to the Object as you can see here

{$o_1: true, $N_1: '<View><ViewFields><FieldRef Name="WorkShop" /><FieldRef Name="Participant" /></ViewFields></View>'}
$N_1: "<View><ViewFields><FieldRef Name=\"WorkShop\" /><FieldRef Name=\"Participant\" /></ViewFields></View>"
$o_1: true

$N_1 is the View and $o_1 is a boolean value, so what can I do since this is not a valid Caml Object in SPFx?

Let’s run this Sample

var query = new CamlBuilder()


        <FieldRef Name="Title" />
        <FieldRef Name="Country" />
        <FieldRef Name="Population" />
        <Join Type="LEFT" ListAlias="Country">
                <FieldRef Name="Country" RefType="ID" />
                <FieldRef Name="ID" List="Country" />
        <Field ShowField="People" Type="Lookup" Name="Population" List="Country" />
                <FieldRef Name="Population" />
                <Value Type="Number">10</Value>

In order the values can be readable in the PnP JS Framework, I had to do this

var query = new CamlBuilder()
          .View(["WorkShop", "Participant"])

//Convert to String
let camlQuery = JSON.stringify(query);

//Add extra escapes
let regexp = new RegExp(camlQuery);

//Remove invalid data
let cq = camlQuery.replace('"$o_1":true,"$N_1":"', '').substring(1).slice(0, -2);

//Define the ViewXML
var q = {

Now we have a valid Query Object tu use in PnP JS

{ViewXml: '<View><ViewFields><FieldRef Name=\"WorkShop\" />
<F…ldRef Name=\"Participant\" /></ViewFields></View>'}
ViewXml: "<View><ViewFields><FieldRef Name=\\\"WorkShop\\\" /><FieldRef Name=\\\"Participant\\\" /></ViewFields></View>"
[[Prototype]]: Object

Use like This

            .then(items => {

Leave a Reply

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