I created a few more fields but within my posts I’m going to focus on these fields as they cover most of the common type of fields in SharePoint.

To support the data from SharePoint lists in my TypeScript code I’m creating an interface matching the lists fields, by creating a new file in my projects calls IBidTrackingBid.ts with the following content:

These 2 methods will get data from my mock data and from SharePoint. Note that both methods return my data in the same format. Both return a Promise of the type Bids.

Reading Mock data

To feed the above method with Mock data I’ve created a new file in my project MockBidTracking.ts. this mock data is used to test my web part while I’m not running the web part within a SharePoint environment

In my next post will look at creating forms within my client side web part.

I hear you say: how do you now render the the data?

The html variable that is used above could be typically set to something like this:
~~~~
html += <code>

${item.Title}${initials}${item.PipelineStage}

</code>

<div class="${styles.rowContainer}">

~~~~As there is a bit more to it than just normal html, I will address the details in a separate post.

I have based this series of posts on some of the work I’ve done for my customers at Triad Group Plc. At Triad we have been looking at the new SharePoint framework since the early releases. If you would like to help us getting you started with SPFx then please feel free to contact me below.