Exploring Microsoft Graph Toolkit - List all Microsoft 365 Groups

If you want to show Microsoft 365 groups anywhere with less code. Here’s the blog and I would like to show you how to do this.

If you want to show Microsoft 365 groups anywhere with less code, here’s the blog and I would like to show you how to do this.

We can easily achieve this with the help of Microsoft Graph API and Microsoft graph Toolkit. To show all the groups in a table format, we can use the mgt-get component and call the groups endpoint from Microsoft Graph API.

Try the below snippets in the Microsoft Graph Toolkit playground or use the Microsoft Graph Toolkit Editor SPFx web part in SharePoint.

To get the above output, add the below snippets to HTML, CSS and Javascript.

HTML Code

Use mgt-get to retrieve the group's response and render it based on the HTML code within the template tag.

<mgt-get resource="/groups" version="v1.0" scopes="group.read" max-pages="2">
    <template>
        <div class="get-wrapper">
            <div class="table">
                <div class="row header">
                    <div class="cell">
                        Name
                    </div>
                    <div class="cell">
                        Email
                    </div>
                    <div class="cell">
                        Privacy
                    </div>
                    <div class="cell" style="text-align:right">
                        Created On
                    </div>
                </div>
                <div class="row" data-for="grp in value">
                    <div class="cell" data-title="Name">
                        {{grp.displayName}}
                    </div>
                    <div class="cell" data-title="Email">
                        {{grp.mail}}
                    </div>
                    <div class="cell" data-title="Privacy">
                        {{grp.visibility}}
                    </div>
                    <div class="cell" data-title="CreatedOn" style="text-align:right">
                        {{grp.createdDateTime}}
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template data-type="loading">
        loading
    </template>
    <template data-type="error">
        {{ this }}
    </template>
</mgt-get>

CSS Code

Apply the styles to the template by using the below CSS snippet,

.get-wrapper {
  margin: 0 auto;
  padding: 40px;
}
 
.get-wrapper .table {
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}
@media screen and (max-width: 580px) {
  .get-wrapper .table {
    display: block;
  }
}
 
.get-wrapper .row {
  display: table-row;
  background: #f6f6f6;
}
.get-wrapper .row:nth-of-type(odd) {
  background: #e9e9e9;
}
.get-wrapper .row.header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}
 
@media screen and (max-width: 580px) {
  .get-wrapper .row {
    padding: 14px 0 7px;
    display: block;
  }
  .get-wrapper .row.header {
    padding: 0;
    height: 6px;
  }
  .get-wrapper .row.header .cell {
    display: none;
  }
  .get-wrapper .row .cell {
    margin-bottom: 10px;
  }
  .get-wrapper .row .cell:before {
    margin-bottom: 3px;
    content: attr(data-title);
    min-width: 98px;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #969696;
    display: block;
  }
}
 
.get-wrapper .cell {
  padding: 6px 12px;
  display: table-cell;
}
@media screen and (max-width: 580px) {
  .get-wrapper .cell {
    padding: 2px 16px;
    display: block;
  }
}

JavaScript Code

We can also use some javascript as a utility function to format the CreatedOn date. Replace the line for created on with

{{converttime(grp.createdDateTime)}} . Then add the below javascript function to the code,

function converttime(ft) {
    var dt = new Date(ft);
    return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
}

The same as above, we can simulate a lot of presentations with the help of templates in Microsoft Graph Toolkits.