MGT component to get data from term store

[anoopt]

Proposal: A new component that displays data from term store using the Microsoft Graph APIs for Taxonomy

Description

A dropdown or a similar control that gets the child terms under a specified termset id and outputs the details (id, name).
There should also be capability to get child terms under a specified term id.

Rationale

The output of this component can be used in tagging data.
Apart from tagging, the output of the component can be used to filter data or display relevant information related to the selected term.

This request is originating from this tweet by Jeremy.

It'd be great to reach out to @metulev about contributing the the Microsoft graph toolkit. Having a web component that can be used not just in spfx but anywhere would be super useful!

— Jeremy (@jthake) August 26, 2020

Preferred Solution

Get the required child terms under a termset and child terms under a term using the Microsoft Graph Taxonomy API.

Either id of a termset or id of a term needs to be supplied to control.

Advise is need on the look and feel please. Maybe something on lines of this GIF.

Additional Context

The SPFx webpart which uses the Microsoft Graph Taxonomy API can be found here.

Apologies if I haven't included any other required information.

[ghost]

Hello anoopt, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[shweaver-MSFT]

Hi @anoopt, Thanks for submitting this proposal!

This is a great idea for a new SharePoint focused component. This is not in our current roadmap, but would you be willing to implement this and submit it as a contribution? We are actually running a contest currently and awarding prizes for good contributions! Find more details here: https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/contest.md

[anoopt]

Thank you @shweaver-MSFT - I am willing to implement this. Can you please assign it to me? It might take some extra time for me to complete this.

[anoopt]

Hi @sebastienlevert - This is the issue I was talking about earlier in the chat :)

I am happy to work on this with the following details if ok?

mgt-taxonomy-picker

Overview

The taxonomy picker is a component that can query any Microsoft Graph API and render a dropdown control allowing selection of a single term.

Note
This capability used to support a single selection coming from the term store. This will be reviewed in the future.

User Scenarios

Select a term from a term set

Select a term from a term in a term set

Select a term from a term in a term set in a different language

Proposed Solution

Examples

<mgt-taxonomy-picker termset-id="138a652e-7f23-46f6-b480-13da2308c235"></mgt-taxonomy-picker>

<mgt-taxonomy-picker termset-id="138a652e-7f23-46f6-b480-13da2308c235" term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"></mgt-taxonomy-picker>

<mgt-taxonomy-picker termset-id="138a652e-7f23-46f6-b480-13da2308c235" term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6" locale="fr-FR"></mgt-taxonomy-picker>

<mgt-taxonomy-picker termset-id="138a652e-7f23-46f6-b480-13da2308c235" cache-enabled="true" cache-invalidation-period="50000"></mgt-taxonomy-picker>

Properties and Attributes

Attribute	Property	Description	Type
placeholder	placeholder	The placeholder to use in the combobox. No default value is provided.	string
termset-id	termsetId	The Id of the termset where the terms are present. The terms under the termset will be shown if term-id is not passed	string
term-id	termId	The id of the term where the terms are present.	Number
locale	locale	The locale of the terms that need to be displayed. This will be useful only when terms have multiple lables in different languages.	String
default-selected-term-id	defaultSelectedTermId	Optional. The id of the term that should be selected by default.	String
version	version	Optional API version to use when making the GET request. Default is beta.	String
cache-enabled	cacheEnabled	Optional Boolean. When set, it indicates that the response from the resource will be cached. Overriden if refresh() is called. Default is false.	Boolean
cache-invalidation-period	cacheInvalidationPeriod	Optional number of milliseconds. When set in combination with cacheEnabled, the delay before the cache reaches its invalidation period will be modified by this value. Default is 0 and will use the default invalidation period.	Number

Events

Event	When it is fired
selectionChanged	Fired when the user makes a change in selection

Templates

Data type	Data Context	Description
default	null: no data	The template used to override the rendering of the entire component.
loading	null: no data	The template used to render the state of the picker while the request to Graph is being made
error	null: no data	The template used if search returns no results.

APIs and Permissions

Permissions required by this component are TermStore.Read.All.

[sebastienlevert]

This is an awesome spec you have there! I invite you to create a PR to the /specs folder with the "specs" part there so we can review inline. The one scenario I have in mind, is what would be the experience for a "cascading" selection? Multiple mgt-taxonomy-picker?

[anoopt]

Thank you @sebastienlevert . I will create a PR to the specs folder.

With respect to your question on the "cascading" selection, yes multiple mgt-taxonomy-picker was an option I thought of. Each picker will output the "selected term" object when a term is picked. The properties of that "selected term" can then be used to drive the cascading picker(s). Would that be ok?

[sebastienlevert]

So it would be to the developer to build their own cascade, right?

[anoopt]

That is right Seb.

I have created a PR with the spec and have targeted it to the next/fluentui branch (as PR #1937 was targeted to the same branch).