Creating an overview of all Delve boards in your organization

Creating an overview of all Delve boards in your organization header image

Almost a year ago boards where announced and introduced, a concept where you could add cards to a board to allow you and your users to group content. A board can thus be used as a starting point to find content from, however Delve only presents you with the boards you are following. In order to find all available boards you have to use the search. However if you search for boards they will show up on the left side of the screen.

Retrieving all Delve Boards

When searching for boards you can use the Programmatically retrieve the list for all Delve boards post Waldek wrote, however that is based on code. The query part is pretty straight forward, it is about the Path:TAG://PUBLIC/?NAME=*, and as pointed out in the same blog you will have to set the IncludeExternalContent:true. By using the same approach you can leverage the out of the box search webparts and achieve an overview of all groups in a search result webpart. When exporting a Search Results webpart you can edit the .webpart file and change the DataProviderJSON property to the following:

{
 "QueryGroupName": "Default",
 "QueryPropertiesTemplateUrl": "sitesearch://webroot",
 "IgnoreQueryPropertiesTemplateUrl": false,
 "SourceID": "8413cd39-2156-4e00-b54d-11efd9abdb89",
 "SourceName": "Local SharePoint Results",
 "SourceLevel": "Ssa",
 "CollapseSpecification": "",
 "QueryTemplate": "Path:TAG://PUBLIC/?NAME=*",
 "FallbackSort": [],
 "FallbackSortJson": "[]",
 "RankRules": [],
 "RankRulesJson": "[]",
 "AsynchronousResultRetrieval": false,
 "SendContentBeforeQuery": true,
 "BatchClientQuery": true,
 "FallbackLanguage": -1,
 "FallbackRankingModelID": "",
 "EnableStemming": true,
 "EnablePhonetic": false,
 "EnableNicknames": false,
 "EnableInterleaving": false,
 "EnableQueryRules": true,
 "EnableOrderingHitHighlightedProperty": false,
 "HitHighlightedMultivaluePropertyLimit": -1,
 "IgnoreContextualScope": true,
 "ScopeResultsToCurrentSite": false,
 "TrimDuplicates": false,
 "Properties": {
 "TryCache": true,
 "Scope": "{Site.URL}",
 "UpdateLinksForCatalogItems": true,
 "EnableStacking": true,
 "ListId": "3ea9463f-46db-4dbb-80f1-ef446751129d",
 "ListItemId": 3,
 "IncludeExternalContent": true
 },
"PropertiesJson": "{\"TryCache\":true,\"Scope\":\"{Site.URL}\",\"UpdateLinksForCatalogItems\":true,\"EnableStacking\":true,\"ListId\":\"3ea9463f-46db-4dbb-80f1-ef446751129d\",\"ListItemId\":3,**\"IncludeExternalContent\":true**}",
"ClientType": "ContentSearchRegular",
"UpdateAjaxNavigate": true,
"SummaryLength": 180,
"DesiredSnippetLength": 90,
"PersonalizedQuery": false,
"FallbackRefinementFilters": null,
"IgnoreStaleServerQuery": false,
"RenderTemplateId": "DefaultDataProvider",
"AlternateErrorMessage": null,
"Title": ""
}

As you can see you have to set the QueryTemplate, the Properties array and the PropertiesJSON array. By setting those properties you can get an overview of all groups in your tenant. You can apply the same technique to either a Content Search webpart or to the Search Results webpart. The results will look more or less the same.

The downside of this approach is that while you can see the boards the links are not working, and the icons are not correct. So you can get an overview of all the available boards but have no interaction on them. And that is something easily fixed by adding a custom display template.

Display Template

In order to set the icons correctly you will need to create your own control display template in order to add the required CSS, while for the items itself you will need an item display template.

The icons can be pulled from the Office UI Fabric, making sure you have a consistent UI. To use those icons you will need a reference to the CSS, something you can do using the following statement:

$includeCSS(this.url, 'https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css');

I ended up making a copy of the default group and just adding that line. Once the CSS is in place you can use it in your item display template by adding the following snippet as the icon

<a class="cbs-ItemLink" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
     <i class="ms-Icon ms-Icon--boards" aria-hidden="true" ></i>
</a>

The last step is to make sure you have the correct link to the board. When navigating Delve you will see that links to boards are pretty straight forward. The all point to: https://contoso-my.sharepoint.com/_layouts/15/me.aspx?b= where the b= is followed by the URL encoded board name. In order to achieve this in your display template you will need the following

var tenantPrefix = window.location.href.split('.')[0];
var boardUrlPrefix =  tenantPrefix + "-my.sharepoint.com/_layouts/15/me.aspx?b=";
var boardUrl = boardUrlPrefix + linkURL;

Here we do assume that the linkURL contains the boardname, but you can use different properties for that as well. The end result is a search webpart on any given page with an overview of all available boards.

You can download the display templates for Delve Boards and start using them right away. If you have any questions just let me know!

Loading comments…