Updated documentation
This commit is contained in:
Hugo Bernier
parent
fb90f24c00
commit
8bbce1a50f
|
|
@ -414,4 +414,61 @@ ReactContentQuery.ExternalScripts.MyCustomBlockHelper = {
|
|||
}
|
||||
```
|
||||
|
||||
### Using Microsoft Graph Toolkit
|
||||
|
||||
The Content Query Web Part provides support for [Microsoft Graph Toolkit](https://docs.microsoft.com/en-us/graph/toolkit/overview) (MGT) integration to easily query the [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview) within your handlebars templates.
|
||||
|
||||
You can use any of the MGT components without additional steps, although the MGT integration was designed specifically with [Person](https://docs.microsoft.com/en-us/graph/toolkit/components/person), [People](https://docs.microsoft.com/en-us/graph/toolkit/components/people), and [Person card](https://docs.microsoft.com/en-us/graph/toolkit/components/person-card) components.
|
||||
|
||||
#### Using MGT with a person field
|
||||
|
||||
If you have a SharePoint list containing a user field (like a **Created By** or **Modified By** field) or a person field, you can pass the `email` property from field's the `personValue` to the MGT component's `person-query` attribute.
|
||||
|
||||
For example, to use the `mgt-person` component with a person field called `MyPersonField`, you would use the following template:
|
||||
|
||||
|
||||
```handlebars
|
||||
<mgt-person person-query="{{MyPersonField.personValue.email}}" view="twoLines"></mgt-person>
|
||||
```
|
||||
|
||||
#### Using MGT templates
|
||||
|
||||
MGT supports the use of custom templates to modify the content of a components.
|
||||
|
||||
According to [MGT documentation](https://docs.microsoft.com/en-us/graph/toolkit/customize-components/templates), the binding syntax to inject dynamic content in a template uses a block delimited by `{{` and `}}` -- which conflicts with the Handlebars binding syntax.
|
||||
|
||||
In order to use a custom MGT template in your Handlebars template, use `[[` and `]]` instead of `{{` and `}}` to bind to the MGT context.
|
||||
|
||||
For example, you would replace the following Handlebars template:
|
||||
|
||||
```handlebars
|
||||
<mgt-person person-query="{{MyPersonField.personValue.email}}">
|
||||
<template>
|
||||
<div data-if="person.image">
|
||||
<img src="{{ person.image }}" />
|
||||
</div>
|
||||
<div data-else>
|
||||
{{ person.displayName }}
|
||||
</div>
|
||||
</template>
|
||||
</mgt-person>
|
||||
```
|
||||
|
||||
With the following template:
|
||||
|
||||
```handlebars
|
||||
<mgt-person person-query="{{MyPersonField.personValue.email}}">
|
||||
<template>
|
||||
<div data-if="person.image">
|
||||
<img src="[[ person.image ]]" />
|
||||
</div>
|
||||
<div data-else>
|
||||
[[ person.displayName ]]
|
||||
</div>
|
||||
</template>
|
||||
</mgt-person>
|
||||
```
|
||||
|
||||
Note that, in the example above, the `person-query` attribute is still bound using the Handlebars syntax `person-query="{{MyPersonField.personValue.email}}"`, whereas the MGT template uses `[[ person.image ]]` and `[[ person.displayName ]]`.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-web parts/samples/react-content-query-online" />
|
||||
|
|
|
|||
|
|
@ -90,16 +90,11 @@ export class ContentQueryService implements IContentQueryService {
|
|||
// Builds the CAML query based on the web part settings
|
||||
const query: string = CamlQueryHelper.generateCamlQuery(querySettings);
|
||||
|
||||
//TODO: Remove
|
||||
console.log("Query", query);
|
||||
|
||||
//Log.info(this.logSource, Text.format("Generated CAML query {0}...", query), this.context.serviceScope);
|
||||
|
||||
// Queries the list with the generated CAML query
|
||||
this.listService.getListItemsByQuery(querySettings.webUrl, querySettings.listId, query)
|
||||
.then((data: any) => {
|
||||
//TODO: Remove
|
||||
console.log("List Service data", data);
|
||||
// Updates the template context with the normalized query results
|
||||
let normalizedResults = this.normalizeQueryResults(data.value, querySettings.viewFields);
|
||||
templateContext.items = normalizedResults;
|
||||
|
|
@ -298,8 +293,6 @@ export class ContentQueryService implements IContentQueryService {
|
|||
// Otherwise gets the options asynchronously
|
||||
return new Promise<IDropdownOption[]>((resolve, reject) => {
|
||||
this.listService.getListFields(webUrl, listId, ['InternalName', 'Title', 'Sortable'], 'Title').then((data: any) => {
|
||||
//TODO: Remove
|
||||
console.log("Fields", data);
|
||||
const sortableFields: any[] = data.value.filter((field) => { return field.Sortable == true; });
|
||||
let options: IDropdownOption[] = [{ key: "", text: strings.queryFilterPanelStrings.queryFilterStrings.fieldSelectLabel }];
|
||||
const orderByOptions: IDropdownOption[] = sortableFields.map((field) => { return { key: field.InternalName, text: Text.format("{0} \{\{{1}\}\}", field.Title, field.InternalName) }; });
|
||||
|
|
@ -589,10 +582,6 @@ export class ContentQueryService implements IContentQueryService {
|
|||
private normalizeQueryResults(results: any[], viewFields: string[]): INormalizedResult[] {
|
||||
//Log.verbose(this.logSource, "Normalizing results for the requested handlebars context...", this.context.serviceScope);
|
||||
|
||||
// TODO: Remove
|
||||
console.log("Results", results);
|
||||
|
||||
|
||||
const normalizedResults: INormalizedResult[] = results.map((result) => {
|
||||
let normalizedResult: any = {};
|
||||
let formattedCharsRegex = /_x00(20|3a|[c-f]{1}[0-9a-f]{1})_/gi;
|
||||
|
|
@ -619,9 +608,6 @@ export class ContentQueryService implements IContentQueryService {
|
|||
return normalizedResult;
|
||||
});
|
||||
|
||||
//TODO: Remove
|
||||
console.log("Normalized results", normalizedResults);
|
||||
|
||||
return normalizedResults;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,26 +135,23 @@ export default class ContentQueryWebPart
|
|||
viewFields: this.properties.viewFields,
|
||||
};
|
||||
|
||||
// Enable MGT support if provider isn't registered and we requested MGT support
|
||||
// if (this.properties.enableMGT && Providers.globalProvider === undefined) {
|
||||
// Providers.globalProvider = new SharePointProvider(this.context);
|
||||
// }
|
||||
|
||||
// Enable MGT support only if required
|
||||
if (this.properties.enableMGT)
|
||||
{
|
||||
// Add MGT dependencies
|
||||
const MGT:any = require('@microsoft/mgt');
|
||||
|
||||
// We only need to re-register the SharePoint provider if we didn't register it before
|
||||
if (MGT.Providers.globalProvider === undefined) {
|
||||
// Register the SharePoint provider
|
||||
MGT.Providers.globalProvider = new MGT.SharePointProvider(this.context);
|
||||
}
|
||||
|
||||
// if (this.properties.enableMGT === undefined) {
|
||||
// this.properties.enableMGT = false;
|
||||
// }
|
||||
// Make sure that the custom binding syntax is enabled
|
||||
// we do this because we don't want the standard MGT template binding ( {{ }} ) to interfere with handlebars syntax
|
||||
MGT.TemplateHelper.setBindingSyntax('[[', ']]');
|
||||
|
||||
}
|
||||
|
||||
|
||||
const element: React.ReactElement<IContentQueryProps> = React.createElement(ContentQuery,
|
||||
{
|
||||
onLoadTemplate: this.loadTemplate.bind(this),
|
||||
|
|
|
|||
Loading…
Reference in New Issue