Introduction to Mashup Solution Creation

Up to this point in the series, three different SharePoint lists have been created to build the mashup solution: Customers, Customer Contacts, and Interactions. These lists were built with explanations around their significance in the bigger picture. The steps to create a mashup solution will be discussed in detail. Using a SharePoint modern page, the placement and configuration of the web parts for the lists will be shared with screenshots.

Adding the Mashup Page Sections

To spread the web parts out, two sections will be created. The first section will contain two columns. The second will contain just one large column (see Image 1). This is not always key when building a mashup page. Understanding what is being created will assist in the placement of sections, columns, and web parts. SharePoint is very forgiving, and different layouts can be tried with relative ease.

Image 1

Adding the Web Parts

Continue to use Image 1 as a reference to where the web parts have been placed in the X-Stream CRM mashup this series is creating. Customers are the focus of a CRM. To ensure the customers in this mashup are clearly visible and given the highest priority, the web part has been placed in the top left. Customer Contacts are high on the priority list for the fictional X-Stream Widget company, so that web part has been placed on the top right.

The Interactions web part has been placed in the second section, taking the entire width of the page. This is to accommodate the large amount of information the creator of the CRM mashup wanted to show on the page. Note that the Interactions web part is the only web part on the page designed to allow for the direct creation of new entries. This, too, can be a governance choice when building a mashup.

Configuring the Mashup Web Parts

Once the web parts are added and the overall layout is approved, the next task is to configure the web parts. Select the web part you want to receive a filter and go into the list web part configuration panel. On the configuration panel, turn the toggle for Dynamic filtering. Once engaged, two drop-down combo boxes will appear. Once you set the first two drop-down combo boxes, a third drop-down combo box will show itself (see Image 2).

Image 2

Configure the first drop-down to select the column to filter in the web part you are currently configuring. In the case of the X-Stream CRM mashup, the company column from the Customer Contacts list web part has been selected. The customer in this CRM is considered the entire company X-Stream Widgets is doing business with.

The second drop-down combo box is there to select which web part is to pass the filter from. Depicted in Image 2, the filter will be passed from the Customers web part. With the third drop-down combo box, the column containing the filter data that will be passed is selected. Company Name has been selected in Image 2.

The next configuration will follow the same steps as listed above, but this time Interactions will receive its filter from Customer Contacts. This CRM mashup daisy chains the web parts with filters to allow a deeper dive into interactions based on just one individual. Once completed, the mashup page will need to be published to be utilized.

Using the CRM

A sales representative from X-Stream Widgets will be expected to go to this CRM solution and capture data when they interact with the customer. The representatives will be expected to find the customers they are going to interact with first. Select that customer to show all the contacts associated with the appropriate Customer Contacts web part (see Image 3).

Image 3

In Image 3, you can see the representative selected the customer Astro Dog Walking Belts. Once selected, only the employees from Astro Dog Walking Belts were shown in the web part Customer Contacts. The representative wanted to interact with the Clinic Doctor Adrian and selected the appropriate record. Once selected, only the interactions with Adrian were shown in the Interactions web part. This will allow the representative to catch up on all previous interactions with the contact and/or add a new interaction if needed.

Conclusion

Configuring the mashup page(s) turns out to be less complicated than the preparation of the components creating it. Despite how simple it is in nature, the final solution a mashup can create could be revolutionary for a company. Once created, adding to the mashup or improving upon it is a common path. In the last part of this series, the best practices as well as the gotchas will be covered.