How to create templates that define how entries on SharePoint lists are rendered inside Web Parts

In several scenarios, you may have a pre-populated SharePoint list, that you'd wish to map to a relevant BindTuning web part, without needing to migrate any of that content to BindTuning's template lists.

BindTuning's Web Part smart functionality will help you create a template that defines how the entries on your SharePoint list will be rendered inside the supported Web Parts. Likewise, any new list entry will be automatically added to the Web Part, following the pre-defined rules and, without the need for manual intervention.

Before we begin

Below are the BindTuning Web Parts that contemplate the option to use SharePoint lists as a source:

Filters
Smart Tiles
Smart Slider

Demo configurations for all these Web Parts can be found below.

Note: The configuration steps will remain consistent, regardless of the above-mentioned web part you wish to utilize.

Source list

The first step in configuring one of the presented web parts sits with creating and/or choosing our default SharePoint list, which will feed its content to the web part of your choosing.

For demonstration purposes, we have created a Project Management list, which we will be utilizing for the configuration of the web parts mentioned above.

Inside our Projects list, we have created several columns, which we will, subsequently, map to the web part zones:

Manager;
Status;
Year;
Month;
Deliverables;
Background;
Company.

As soon as we have chosen our SharePoint data source (i.e, Projects list), we can proceed to map our columns to a corresponding web part zone.

Connect to Filters Web Part

As mentioned above, you're able to pull the information directly from your SharePoint list, to the Filters Web Part. To do so, follow the steps below:

Add a BindTuning Filters Web Part to our page;
Click the Configure button;
Create a new BindTuning Filters Template list;
Under List Settings select Manage Lists;
Under Data Source Url select the option Add List;
Connect the Data Source Url to the pre-existing SharePoint list (i.e, Projects).

After setting up all the necessary dependencies, we will need to create the template, whose purpose is to control how our list content is displayed with the web part. To do so, follow the steps below:

Mouse over the Web Part and select the Add button (+);
Select the Templates List created when adding the web part to the page.

This will open the configuration form, which we will utilize in order to map our Data Source list columns (Projects) to our BindTuning Template List (Project-Filters-List).

In this form, we're freely able to map those same columns to any possible zone.

In order to successfully demonstrate a common configuration scenario, we will be mapping the following columns:

Background;
Company.

Note: It is not required to map all columns inside your data source, as you are able to tailor the pulled information based on your specific requirements.

Let's say we want to map our Background column (Projects list) to a corresponding zone on the Filters Web Part. We would be able to utilize the Tile Background zone to do so.

Moreover, we can utilize the Captions zone, so as to display our Company name.

This mapping is done by using the double curly-bracket notation. In this example, we would proceed with the following arrangements:

Tile Background zone will be set to{{Background}} ;
Captions zone will be set to{{Company}} .

After all the necessary arrangements have been performed, save the configuration and all your SharePoint list entries will show up, following the defined template.

Connect to Smart Tiles

As mentioned, the configuration for the Smart functionality will remain consistent, regardless of the chosen Web Part. To configure a Smart Tiles, follow the steps below:

Add a BindTuning Tiles Web Part to our page;
Click the Configure button;
Create a new BindTuning Tiles List;
On the top-right corner of the Web Part click the Add button (+);
Under Tile Type, select Smart Tile;

You'll notice that a new section, titled Connect to a Data Source, showed up on the configuration form. We will be utilizing this same section to connect our SharePoint list (Projects) to our new tile. To do so, select Add List and connect it to your pre-existing SharePoint list (i.e, Projects).

After this connection has been performed, we will now begin to map the columns on our Projects list to the available Tile Zones.

This time, we will be adding our Manager and Background columns, to the Tile Caption and Tile Background respectively.

Note that we have mapped the column Title, instead of Manager, and that's because we always need to utilize the column's internal name.

To check the correct internal name of the column please follow the steps below:

Access Site contents and open your list;
On the top menu, click on List and then List Settings (or Settings > List Settings);
On the Columns section, click to open the column name you want to use;
Inside, on the URL look for "...Field=...".
Copy the internal name;
Now paste the name into the desired text box section.

As soon as the configuration has been saved, you'll be able to see a slide-like display of all your SharePoint list items (i.e, Projects) inside your Tiles web part.

Connect to Smart Slider

To connect your SharePoint list to a Smart Slider, follow the steps below:

Add a BindTuning Slider Web Part to our page;
Click the Configure button;
Create a new BindTuning Slider List;
Under List Settings select Manage Slider;
On the form, change from Default Slider to Smart Slider;
Under Template List, connect to the list created in step 3;
Under Source List, connect to your pre-existing data source (i.e, Projects), and Save.

After the list configurations have been performed, click on the Add button (+). In the New Slide form, proceed to map the necessary columns to their respective Web Part zones: