MGT File control in SPFx

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the File control.

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

The File control is used only to display a single folder, if you’re planning on displaying a set of folder there is a better solution which is the File List control.

Let’s see the UI result of the control:

• While loading

• With all the File controls loaded

The code

To use the File control you have to import it using the following:

import { File, MgtTemplateProps } from '@microsoft/mgt-react/dist/es6/spfx';

NB : In this sample the MgtTemplateProps is used only for the custom template, if you’re not planning to define a custom template you can avoid importing the class.

The simplest way to use the control is, if you know the item id, the following:

<File itemId={itemId}/>

Or if you prefer you can use the API path:

<File fileQuery={`/me/drive/items/${itemId}`} />

Another fashion to select the item is to use the file path, for example:

<File itemPath="/MyFolder/UltraSecretDocument.docx" />

You can also manage the properties to display, for example you can display the item id and the last modified date like this:

 <File  fileQuery={`/me/drive/items/${itemId}`} line2Property='id' line3Property='lastModifiedDateTime' />

Moving on, you can use MgtTemplateProps to customize the template of the control, for example you can define a behavior for when the control is:

• loading
• does not have data
• the default visualization of the item

To achieve this you have to define a variable or a function that returns a JSX.Element, in my sample I used the following:

const FileTemplate = (props: MgtTemplateProps): JSX.Element => { // If the template is loading, show a spinner if (props.template === "loading") { return <Spinner label="Loading file..."></Spinner>; } // If the template has no data, show a message if (props.template === "no-data") { return <div>No data for the specified file</div>; } // If the template is for a file, show the custom file details if (props.dataContext && props.dataContext.file) { return ( <div> <i><Icon iconName="FavoriteStar" /> This is awesome!</i> <div>Size: {props.dataContext.file.size}</div> </div> ); } return <></>; }

which defines all the three customizations, and to tell the controls that you want to use your customization you can define it like so:

<File itemId={itemId}> <FileTemplate template="loading" /> <FileTemplate template="no-data" /> <FileTemplate template="default"/></File>

In this sample the FileTemplate element is the variable defined in the previous code block.

Conclusion

To wrap up: there are many configurations possible with the File control, in this sample I used only a few, if you’re interested in knowing more you can take a look at the official documentation here and check out the code of the sample here.

Hope this helps!