Using Dynamic Data Connectors to Consume Connections to the Lightning Conductor SPFx CSWP

Using SPFx Dynamic Data Connectors, you can now select a view, apply a filter, or apply conditional formatting using Dynamic Data Connectors. Watch the video to see how.

Steps to Create Dynamic Data Connector using Query String Parameter

  1. Navigate to the page that contains the Lightning Conductor app and add a query string parameter at the end of the URL, such as ?Viewname=Tasks as shown in the video example.
  1. Edit the page by clicking Edit in the upper right corner.
  2. Once in Edit mode, click on the Lightning Conductor app and then the Edit app button on the left.
  1. In the Lightning Conductor app Edit Settings pane on the right, click on the ellipses next to Export and choose Connect Current View.
  1. A dialog box will appear. Choose the data source Page Environment from the drop down menu.
  1. Next, select Query String from the Page Environment’s properties menu, followed by Query parameters from the Query string’s parameters menu, and lastly choose Viewname from the Query parameter’s properties menu. Click Save.
  1. You can now use the URL of the page with parameter ?Viewname=Tasks to link directly to the Lightning Conductor app in that view, or replace the name Tasks with the name of a different view to load, such as My Tasks or Documents, as seen in the video.
  2. If there is a need to prevent users from being able to switch views once they’ve landed on the page, go to the Lightning Conductor App Settings (as in Step 3 above), and check the box to Hide View Changing Menu. The App Settings can then be closed by clicking the X in the upper right corner of the settings pane, followed by Republishing the page to save any changes.

Steps to apply conditional formatting

In these steps, we will demonstrate how to apply conditional formatting to the Assigned To column based on the current user, which can help to make the current user’s tasks stand out and be more recognizable.

  1. Navigate to the Lightning Conductor app and next to the Assigned To column heading, click the drop down and choose Column Settings >> Formatting.
  1. In the Formatting dialog box, select LIKE from the operator drop down menu.
  1. In the third drop down menu, instead of typing in a username, we will use a web part connection to obtain the username from the page environment variables. On the right of the text field is the web part connection icon, which looks like a plug. Click this icon, which will bring up the Data source dialog box.
  1. In the Data source drop down menu, choose Page Environment, followed by Current user information and User name for the next two fields respectively, and click Save.
  1. Next, we can add the formatting we want to display when our condition (current user) is met. In our video example, we click on the Font menu and choose Bold.
  1. Next, we select Icon and choose the Filled circle and select the color of the circle icon to be that of the Theme Color. Then click Save on the Icon dialog box and then click Save again on the Conditional Formatting dialog box.
  1. We can now see in our Lightning Conductor app current view shows the current user (Lightning Tools) in Bold with a Theme Colored Circle Icon next to it.
Related Posts
Clear Filters
Lightning Conductor – Advanced Mode

In this video, we’ll learn how to use the Advanced Mode of the Lightning Conductor to aggregate content from SharePoint…

Lightning Conductor – Using the Quick Configuration

In this video and documentation, you’ll learn how to use the Lightning Conductor Quick Configuration to configure content aggregation from…

Add Comment