Home >Tips > SharePoint Online from Scratch > Click to filter connected app parts kalmstrom.com site map icon Site map  

Click to Filter with Connected App Parts

A SharePoint Online tutorial by Peter Kalmström

SharePoint iconIn the previous demo Peter Kalmström, CEO and Systems Designer of kalmstrom.com Business Solutions, showed a way to connect web parts to let users select a country and see all customers from that country.

In the demo below Peter will show how to connect the same Customers list to a Countries list app part. The result lets users click on a country to see all customers from that country.

Note that a lists show up under both Web Parts and App Parts, so you can use which one of those buttons you want. That is why Peter could use the Web Part button in the previous demo and the App Part button in this demo and find the same Customers list.

Connect app parts to show filter choices by clicking

  1. Click on the settings gear and select 'Add a page'.
  2. Give the page a name and click on Create. The new page opens in Edit mode.
  3. Click on the Text Layout button under the FORMAT TEXT tab and select two columns.
  4. Place the mouse cursor where you want the Countries list to be displayed and click on the App Part button under the INSERT tab.
  5. Select the Countries list and click on Add.
  6. Place the mouse cursor where you want the Customers list to be displayed and click on the App Part button under the INSERT tab.
  7. Select the Customers list in and click on Add.
  8. Expand the accordion in the top right corner of Countries list app part and select Connections >Send Row of Data To >Customers.
  9. In the pop-up dialog, select 'Get Filter Values From'.
  10. Click on Configure.
  11. Connect the Country field in the Provider to the Country field in the Consumer.
  12. Click on Finish and then Apply and save the page.
Now users can click on the icon to the left of the country, and only customers from that country will be displayed.




Learn more



---------------------------------------------------------------------------------------







Always the latest news in the kalmstrom.com blog



Follow kalmstrom.com on LinkedIn Facebook, Google+  or Twitter!

back icon next icon