microsoftgraph
MGT component to get data from term store
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.
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 🙌
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
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.
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.
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?
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?
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).