Merge e8e3adb into e6b39f7

SAP · Jul 10, 2020 · e2fa75a · e2fa75a
2 parents e6b39f7 + e8e3adb
commit e2fa75a
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,8 @@ pids
 *.seed
 *.pid.lock
 
+.DS_Store
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -20,6 +20,8 @@
 
 - About this library
 
+  - [SAP FSM](fsm.md)
+
   - [Changelog](changelog)
 
   - [License](license.md)
diff --git a/docs/fsm.md b/docs/fsm.md
@@ -0,0 +1,17 @@
+# SAP Field Service Management
+
+ShellSdk has been developed as part of the [SAP Field Service Management](https://www.sap.com/products/field-service-management.html) project to provide a front-end API to components allowing them acess and update to the surrounding interface.
+
+!> This library does not intend to replace the public API used to access and manipulate data.  
+More informations about fsm's public api on the [SAP Field Service Management Help Portal](https://docs.coresystems.net/)
+
+ShellSdk is used internally, but also by third party developers as part of the extension feature.
+
+## Applications allowing third party extensions
+
+<div class="appList">
+  <a href="/#/fsm/dispatching-board" >
+    <img src="/fsm/dispatchBoard.icon.png" alt="Dispatching board icon" />
+    Dispatching Board
+  </a>
+</div>
diff --git a/docs/fsm/dispatchBoard.icon.png b/docs/fsm/dispatchBoard.icon.png
diff --git a/docs/fsm/dispatchBoard.png b/docs/fsm/dispatchBoard.png
diff --git a/docs/fsm/dispatching-board.md b/docs/fsm/dispatching-board.md
@@ -0,0 +1,81 @@
+## Dispatching Board
+
+### Sidebar
+
+<!-- panels:start -->
+
+<!-- div:left-panel -->
+
+A third party plug-in can be dispayed within the dispaching board as part of the sidebar on the right of the screen.
+
+When loaded, this component appears within a collapsable card with a maximum height of `400px`.
+
+<!-- div:right-panel -->
+
+<img src="fsm/dispatchBoard.png" />
+<!-- panels:end -->
+
+#### Data
+
+<!-- panels:start -->
+
+<!-- div:title-panel -->
+
+#### Require context
+
+<!-- div:left-panel -->
+
+Plug-in need to request fsm context to release the embedded loading screen. More about `GET_CONTEXT` within the [ShellSdk Events](/events?id=require_context) page.
+
+<!-- div:right-panel -->
+
+```javascript
+shellSdk.emit(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, {
+  clientIdentifier: '<your-app-client-identifier>',
+  clientSecret: '<your-app-client-secret>',
+});
+```
+
+<!-- panels:end -->
+
+<!-- panels:start -->
+
+<!-- div:title-panel -->
+
+##### Selected Activity
+
+<!-- div:left-panel -->
+
+Selected activity is shared by the dispatching board using the `ViewState` object. In case of no selected activity or if a user unselect noe, the `null` value will be propagated and should also be handle accordingly.
+
+<!-- div:right-panel -->
+
+```javascript
+this.sdk.onViewState('ActivityId', (id) => {
+  // use fsm public API to retrieve the activity object from id value
+});
+```
+
+<!-- panels:end -->
+
+#### Actions
+
+<!-- panels:start -->
+
+<!-- div:title-panel -->
+
+##### Refresh
+
+<!-- div:left-panel -->
+
+When editing data, dispatching board might need to refresh its content to show the updated version. A plug-in can inform the application in such case by triggering a refresh using the `TO_APP` event.
+
+<!-- div:right-panel -->
+
+```javascript
+this.sdk.emit(SHELL_EVENTS.Version1.TO_APP, {
+  type: 'REFRESH',
+});
+```
+
+<!-- panels:end -->
diff --git a/docs/index.html b/docs/index.html
@@ -65,6 +65,34 @@
       .text-danger {
         color: red;
       }
+
+      .appList {
+        display: flex;
+      }
+      .appList img {
+        width: 32px;
+        margin-bottom: 3px;
+      }
+      .appList a {
+        display: flex;
+        width: 150px;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        color: black;
+        text-decoration: none;
+        padding: 32px;
+        text-align: center;
+        flex-direction: column;
+        transition: all 0.3s;
+        margin: 40px;
+      }
+      .appList a:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+        transition: all 0.3s;
+        transform: scale(1.05);
+      }
     </style>
   </head>
   <body>

diff --git a/docs/usage-sample.md b/docs/usage-sample.md
@@ -45,7 +45,7 @@
   ```typescript
   shellSdk.emit(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, {
     clientIdentifier: '<your-app-client-identifier>',
-    cleintSecret: '<your-app-client-secret>',
+    clientSecret: '<your-app-client-secret>',
   });
   ```