Create sample extension with Shell side navigation

Several small updates:

 - Replace old icon with correct icon

 - Add internal links and update Luigi in case extension runs inside Shell

 - Fix viewUrl for side navigation entry 'Edit' inside appconfig.json

 - Add German translations for extension inside 'Foundational Service'

 Add link for extension inside Readme

README.md

@@ -49,6 +49,14 @@ These samples are direct from the feature teams and we welcome your input on iss
  </tr>
 </table>
 
+### Front-end inside Shell with Shell navigation
+
+<table>
+ <tr>
+  <td><a href="samples/with-shell-navigation/">Inside Shell with Shell navigation</a></td>
+ </tr>
+</table>
+
 ## How to obtain support
 
 In case you find a bug or need support, please open an issue [here](https://github.com/SAP-samples/fsm-extension-sample/issues/new).

samples/with-shell-navigation/appconfig.json

@@ -5,6 +5,13 @@
   "version": "1.0.0", 
   "icon": "https://raw.githubusercontent.com/SAP-samples/fsm-extension-sample/refactor/samples/with-shell-navigation/icon.png",
   "lang": "en",
+  "translations": [
+    {
+      "lang": "de",
+      "name": "Erweiterung mit Shell Navigation",
+      "description": "Beispielerweiterung innerhalb der Shell mit Shell Navigation"
+    }
+  ],
   "outletPositions": [
 		"SHELL_HOME_SCREEN"
 	],
@@ -23,7 +30,7 @@
             "value": "Startseite"
           }
         ],
-        "viewUrl": "/",
+        "viewUrl": "/#/",
         "icon": "home",
         "isDefault": true,
         "children": []
@@ -56,7 +63,7 @@
                 "value": "Editieren"
               }
             ],
-            "viewUrl": "/activities/actions/edit",
+            "viewUrl": "/#/actions/edit",
             "icon": null,
             "isDefault": false,
             "children": []

samples/with-shell-navigation/helpers.js

@@ -91,6 +91,8 @@ function getTranslation(lang) {
       'EXTENSION_TITLE': 'Extension with Shell navigation',
       'HOME_TITLE': 'Home',
       'HOME_TEXT': 'This is the starting page.',
+      'LINK_TO_EDIT_TEXT': 'Internal link to page "Actions - Edit"',
+      'LINK_TO_HOME_TEXT': 'Internal link to page "Home"',
       'NOT_FOUND_TITLE': 'Not Found',
       'NOT_FOUND_TEXT': 'Page has not been found.',
       'SIDE_HOME_TITLE': 'Home',
@@ -103,6 +105,8 @@ function getTranslation(lang) {
       'EXTENSION_TITLE': 'Erweiterung mit Shell Navigation',
       'HOME_TITLE': 'Startseite',
       'HOME_TEXT': 'Das ist die Startseite.',
+      'LINK_TO_EDIT_TEXT': 'Interner Link zur Seite "Aktionen - Editieren"',
+      'LINK_TO_HOME_TEXT': 'Interner Link zur "Startseite"',
       'NOT_FOUND_TITLE': 'Nicht gefunden',
       'NOT_FOUND_TEXT': 'Die Seite konnte nicht gefunden werden.',
       'SIDE_HOME_TITLE': 'Startseite',
@@ -126,6 +130,8 @@ function translate(lang) {
   document.getElementById('extension-title').innerHTML = I18N.EXTENSION_TITLE;
   document.getElementById('home-title').innerHTML = I18N.HOME_TITLE;
   document.getElementById('home-text').innerHTML = I18N.HOME_TEXT;
+  document.getElementById('link-to-edit-text').innerHTML = I18N.LINK_TO_EDIT_TEXT;
+  document.getElementById('link-to-home-text').innerHTML = I18N.LINK_TO_HOME_TEXT;
   document.getElementById('not-found-title').innerHTML = I18N.NOT_FOUND_TITLE;
   document.getElementById('not-found-text').innerHTML = I18N.NOT_FOUND_TEXT;
   document.getElementById('side-home-title').innerHTML = I18N.SIDE_HOME_TITLE;
@@ -178,4 +184,11 @@ function getLanguageByLocale(currentLocale) {
 
   // In case the current Shell language is not supported by the extension, return default language.
   return DEFAULT_LOCALE;
+}
+
+// In case extension runs inside Shell and there is an internal navigation, update Luigi inside Shell
+function syncWithLuigi(path) {
+  if (ShellSdk.isInsideShell()) {
+    LuigiClient.linkManager().withoutSync().fromClosestContext().navigate(path);
+  }
 }

samples/with-shell-navigation/index.html

@@ -63,10 +63,12 @@
         <section id="section-home" class="section-hidden">
           <h2 class="fd-title fd-title--h2" id="home-title"></h1>
           <p id="home-text"></p>
+          <a id="link-to-edit-text" href="#/actions/edit" onclick="syncWithLuigi('/actions/edit')"></a>
         </section>
         <section id="section-actions-edit" class="section-hidden">
           <h2 class="fd-title fd-title--h2" id="actions-edit-title"></h1>
           <p id="actions-edit-text"></p>
+          <a id="link-to-home-text" href="#/" onclick="syncWithLuigi('/home')"></a>
         </section>
         <section id="section-not-found" class="section-hidden">
           <h2 class="fd-title fd-title--h2" id="not-found-title"></h1>