Getting Started with the Lightning Conductor Client Side Web Part

Within this documentation and training video, we’ll explore the Lightning Conductor SPFx Client Side Web Part. At the end of the video, you’ll have a good understanding of the Lightning Conductor functionality for rolling up SharePoint Lists, Items through SharePoint Search, and Content from Microsoft Graph. You’ll also understand how to add conditional formatting and styling to the results both within SharePoint Online and Microsoft Teams.

Getting Started

Now that you have the Lightning Conductor Installed, we’ll run through some steps to get you started using the Lightning Conductor so that you know where to find all of the features. The steps are broken up into List aggregation, Graph aggregation and Search aggregation. We’ll finish by showing how to work with the Lightning Conductor in SharePoint and Microsoft Teams.

Aggregating Lists with the Lightning Conductor

To aggregate lists with the Lightning Conductor, you can either use the Quick Configuration or the Advanced Configuration to build a view of aggregated content. The Quick Configuration addresses some common scenarios such as rolling up Tasks, Documents, and Events etc. You can easily select the type of list that you want to aggregate, any filter requirements, select your scope, and then display options. Once the results are displayed on the page, you can further customize your view using Data Formatting, Conditional Formatting, Adding and Removing Columns, Grouping and much more. The Advanced Configuration allows you to be far more granular, and we’ll focus on those options later in this article.

To begin with, we’ll perform an aggregation of Tasks within a Hub Site and it’s associated sites. In later posts, we’ll take you through some other scenarios that you may consider for your organization. However, you can apply the logic that you learn here for the Task lists to any SharePoint list type including custom lists.

Using the Quick Configuration to Aggregate Tasks.

1. Firstly, create a SharePoint page where you wish to use the Lightning Conductor. This example is going to be based upon a Hub Site. You can learn more about Hub Sites here.
2. Add the Lightning Conductor to your page by clicking the Add a Web Part button.
   

3. Select the Lightning Conductor from the popup dialog.

4. Click the Configure button in the Lightning Conductor to launch the Quick Configuration.
5. Select Tasks in the first drop down (What list data do you want to view?).
6. Select All Tasks in the second drop down (How do you want to refine it?).
7. Select Current Site and Associated Sites from the third drop down (Where should the data come from?)
8. Select Grid View from the last option. (How Shall We Display It?)

9. Click Save. You will see an aggregated view of Tasks from within the hub. Note: If you don’t see any tasks, you may not have any Task lists within the Hub Site or Associated Sites, or they may not have any list items.

10. While you are still in Edit mode on the page, click the download arrow next to any column.
11. In the Column Settings, you’ll be able to Move columns left or right, Hid or Show Columns, Group By the current column, Add Formatting and Conditional Formatting or Click More Settings where there are many more options.
12. Under Column Settings, Click Show Column, and then choose Start Date.
13. Click the downward arrow on the Start Date column and move the column to the left of Due Date.
14. On both the Start Date and Due Date Columns, click the downward arrow, Column Settings, More Settings to set the Display Format to Short Date.

15. To Group By Task Status, Click the Downward Arrow on Task Status and choose Group By.
16. Click the Downward arrow on the Priority Column and choose Column Settings, Formatting to configure Conditional Formatting.
17. Set the Condition to High, and select an icon and colour for the icon to highlight High Priority Tasks.

18. Next, we’ll add the Data Bars to the % Complete column. Click the downward arrow next to the % Complete column and choose Column Settings, Formatting.
19. Delete the condition using the Trash Can icon.
20. Click the downward arrow next to Data Bar, and set the Max Value to 1.
21. Set the Hide Value to on.

22. You should end up with a view that displays Tasks with conditional formatting and Data Bars applied as below:

Building an additional View

The Lightning Conductor allows you to have multiple views of aggregated content similar to that of a SharePoint list, but the content can come from the same or different types of lists. It’s possible for example to have the views such as All Tasks, My Tasks, and My Overdue Tasks as three different views, or even My Tasks, My Documents, and My Events. You could also use a second view to show the same content in a different format e.g. My Documents in a Grid View, and My Documents in a Tile View.

In this exercise, we’ll add a Document Library to our Lightning Conductor Instance and a Calendar View to show Tasks within a Calendar:

1. Using the Same Web Part instance, and with the page still in Edit mode, Click the Pencil icon to edit the Lightning Conductor settings.

2. Click the + icon in the configure views section of the Lightning Conductor.
3. A view will be created with the Title “New View 1”. Change the view name to Documents.
4. Click the Cog icon next to the newly created Documents view.

5. Accept the defaults except for the “Where should the data come from?” which will be changed to Current Site and Associated Sites.
6. Click Save.
7. Repeat the above steps to add a third view called Tasks in a Calendar.
8. Set the first drop down to Tasks, the second to All Tasks, the third to Current Site and Associated Sites.
9. Choose Calendar instead of Grid View.
10. Click Save.
11. You should now have three views in your Lightning Conductor instance.
12. Note that you can also change the default view, clone a view, or set the view to a personal view.

In the next section, we’ll explore the Advanced Mode and how you can be more specific with your content aggregation from lists, but also explore the Graph and Search aggregations.

Advanced Mode

Ok, roll your sleeves up and let’s jump into Advanced Mode! Within Advanced Mode, you can first of all select the type of aggregation that you want to perform. You can aggregate from Lists, Microsoft SharePoint Search Result Sources or Microsoft Graph Entities such as Planner Tasks, or OneDrive Items.

There are four main tabs in the Advanced Mode that we will explore. To get started:

1. Add another instance of the Lightning Conductor Web Part to your page.
2. Click the Configure button.
3. Click Advanced Mode

Web Part tab

The Web Part tab contains four fields. The initial will allow you to choose between Search Rollup Engine Provider, Object Model Rollup Engine Provider or Graph Rollup Engine Provider. These are described below:

• Search Rollup Engine Provider – The benefit of using the Search Rollup Engine Provider is performance. The content that you are aggregating is already cached so it pretty much displays immediately. On the negative side, the results may not be up-to-date since they are cached. For instance, if someone had marked a task as complete, it may still be showing incomplete in the Lightning Conductor until the search index recrawls. Search results are also limited to 500 items.
• Object Model Rollup Engine Provider – There are several benefits to the Object Model Engine Provider. You can be very specific about which lists to aggregate from, it is must easier to select columns including custom columns, results show real time updates, and to be honest it isn’t exactly slow. You might be waiting a few seconds to see the results, but that’s a lot quicker than navigating site to site and trying to remember where you stored that document right? 🙂
• Graph Rollup Engine Provider – The Graph Rollup Engine Provider enables you to get content from almost anything in Microsoft 365 and without any code. Just choose the Entity such as One Drive Items, Planner Tasks, and Messages. Results are super fast, and you can build reports on content that resides outside of SharePoint.

The second option allows you to select from Grid View Display Provider, JSON Display Provider, and XSL Style Provider. This is all about how your content will be displayed and each option is explained below:

• Grid View Display Provider – The Grid View display provider resembles a SharePoint list view. It’s a modern table of content with columns. You can select the columns to show, add grouping, conditional formatting etc all without code.
• JSON Display Provider – JSON is a language Javascript language. You can use it in the Lightning Conductor to build whatever you want for display purposes. To help get you started, the Lightning Conductor already contains several JSON views that you can use as they are, or customize further. They include a Calendar and Tile View.
• XSL Style Display Provider – XSLT is another language but a little more painful than JSON. We’d really recommend using JSON to customize your display. But some people will choose a Burger over a Steak. There are also some built in XSLT views to help get you started. They are not as cool as the JSON ones, but they are there if you want to try them out.

Two more options on the Web Part tab include:

• Configure Data Refreshing Interval – Do you want the content to refresh on it’s own, or do you want to do a page refresh? If you want to do a page refresh, leave this field blank. If you want content to refresh in front of your eyes, you can specify how many seconds between refresh intervals.
• Configure Statistical Information – This is useful information to see how much content you are aggregating and how much time that is taking. It’s great to have switch on when configuring and testing the Lightning Conductor, but best switched off for when your page goes live.

Data Source

The Data Source Tab will change depending on whether you chose Search, Graph or Object Model Rollup Providers.

• The Search Model Rollup Provider will display all of the Result Sources within SharePoint Search. We will go into these in more detail in a later. However, to get you started. The below screenshot shows how you can use “Items Matching a Content Type”, and then Setting that Content Type ID to Documents. The ellipses for the Content Type ID field will give you the friendly name of each content type, but display the content type id.

• Object Model Rollup Provider – The Data Source tab will enable you to select where the content is being aggregated from by using a treeview. You can change the granularity of the treeview using the combo box. For example, you can rollup from multiple lists so the treeview will go to list level. If you select “rollup from multiple sites” the treeview will only go to site level etc. You can then select the lists, sites or site collections that will be the scope of your rollup. You can then choose the List Type and Content Type such as Tasks, or Documents. You don’t always have to choose a Content Type if you want to bring back all items from the scope and list type regardless of the content type. There are quite a few other options that we will explore in a later section.

• Graph Rollup Engine Provider – The Graph Rollup Engine Provider is used to aggregate content from Microsoft Graph. To get started, you can select an Entity Type such as Planner Tasks, and then Add a Query. There are some pre-defined queries such as User planner tasks which you can use to get started.

Columns Tab

If you are using the Grid View Display Provider, the Columns tab enables you to select all of the columns that you wish to display within your Grid View. If however, you are using the JSON or XSLT Display Providers, selecting the columns will make the columns available for mapping to your JSON/XSLT template. For example being able to map Start Date to a Calendar.

You can select the columns that you wish to display, and drag them up or down to specify the order that the columns will display. Notice that you can also specify sorting, and filtering on each of the columns that you select.

The Filter option at the top of the columns tab of the command bar enables you to perform more advanced filters that can contain multiple columns with And | Or conditions.

Additionally, you can create your own calculated column. This is something that we will cover in a later section.

Display Tab

The Display Tab will vary based on whether you selected the Grid View Display Provider, JSON Display Provider or XSLT Display Provider.

Using the Grid View Display Provider, on the Display tab, you will be able to set the Data Display Format for each column that is not a Single Line of Text column type. You will be able to configure the Column Alias, Column Width, Grouping, Formatting and Summary functions. There are many properties that we will elaborate on in a later section.

If you selected the JSON Display Provider, you will be able to select one of our built in Javascript Templates such as the Calendar, or build your own and upload it to the JavaScript files library. Some of the display templates may require parameter values such as the Calendar template. Using the Calendar Template, you’ll need to set the Start Date, Title, and End Date Column names. Note that these are the internal column names and not the display column names. You can obtain these internal column names by navigating back to the Columns tab and hovering over your desired column.

The XSLT Display Tab is similar to that of JSON. However, the Templates will be more classic rather than modern.