Update README.md

README.md

@@ -1,2 +1,56 @@
 # msgraphtoolkitsamples
-Project samples exploring the Microsoft Graph Toolkit components
+This repository contains samples that demonstrate different usages patterns for the Microsoft Graph Toolkit web components
+
+There are different files under examples/js-apps/views folder  contains the example of each component. The below is the list,
+allcomponents.html
+getallusers.html
+groupandmembers.html
+heirarchyview.html
+plannertasks-timeline.html
+recentitems.html
+roleandmembers.html
+
+Each file is independent, so we have to add the Client ID to each file, and also we have to add the each file url as redirect URL in App Registrtation portal.
+
+## STEPS
+* Under Views folder, open any html
+* Search for [[CLIENT-ID], available im mgt-msal-provider element, replace this with the your Client ID from your registration app. How to - https://www.youtube.com/watch?v=HgZJEEoRk4w&t=14s
+* Save the file
+
+* Navigate to App Registration Portal and select your App.
+* Then add the localhost html location in Redirect URL in your registered app
+
+* Everything is ready run `npm install`
+* Then run `npm start`
+
+
+## All Components -  allcomponents.html
+![allcomponents.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/allcomponents.jpg)
+
+## Get All Group Users - getallusers.html
+![getallusers.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/allusers.jpg)
+
+## Groups and Its Members - groupandmembers.html
+![groupandmembers.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/groupsandmembers.jpg)
+
+## Heirarchy View - heirarchyview.html
+![heirarchyview.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/heirarchyview.jpg)
+
+## Planner Tasks and Timeline - plannertasks-timeline.html
+![plannertasks-timeline.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/plannertasks-timeline.jpg)
+
+## Recent Items - recentItems.html
+![recentItems.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/recentitems.jpg)
+
+## Role and its members - roleandmembers.html
+![roleandmembers.html](https://raw.githubusercontent.com/ktskumar/msgraphtoolkitsamples/dev/docs/images/roleandmembers.jpg)
+
+## Mail Box
+In Progress
+
+And lot more examples are coming soon..
+
+Shantha Kumar T ( @ktskumar )
+ktskumar.com
+
+

examples/js-apps/assets/style.css

@@ -0,0 +1,47 @@
+body {
+    font-family: SegoeUI, Helvetica, Arial, sans-serif;
+    margin:auto;
+    padding: 0px;
+}
+
+@font-face {
+    font-family: 'SegoeUI';
+    src: local('Segoe UI Light');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SegoeUI';
+    src: local('Segoe UI Semilight');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SegoeUI';
+    src: local('Segoe UI');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SegoeUI';
+    src: local('Segoe UI Semibold');
+    font-weight: 600;
+    font-style: normal;
+}
+
+header{
+    padding:0 10px;
+    height: 64px;
+    align-items: center;
+    display:flex;
+    flex-direction: row;
+    border:1px solid #eee;
+    font-size:18px;
+    font-weight: bold;
+}
+mgt-login{
+    margin-left: auto;
+}

examples/js-apps/index.js

@@ -0,0 +1,26 @@
+// server.js
+// where your node app starts
+
+// init project
+const express = require("express");
+const app = express();
+const port = 2020;
+
+// we've started you off with Express,
+// but feel free to use whatever libs or frameworks you'd like through `package.json`.
+
+// http://expressjs.com/en/starter/static-files.html
+app.use(express.static("assets"));
+app.use(express.static("views"));
+
+// http://expressjs.com/en/starter/basic-routing.html
+app.get("/", function(request, response) {
+  response.sendFile(__dirname + "/views/index.html");
+});
+
+
+
+// listen for requests :)
+const listener = app.listen(port, function() {
+  console.log("Your app is listening on port " + listener.address().port);
+});