Extension template: Use backoffice JSON options and other fixes

templates/UmbracoExtension/.template.config/template.json

@@ -152,7 +152,8 @@
         {
           "condition": "(!IncludeExample)",
           "exclude": [
-            "[Cc]lient/src/dashboards/**"
+            "[Cc]lient/src/dashboards/**",
+            "ViewModels/**"
           ]
         },
         {

templates/UmbracoExtension/Client/src/dashboards/dashboard.element.ts

@@ -9,7 +9,7 @@ import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
 import { UUIButtonElement } from "@umbraco-cms/backoffice/external/uui";
 import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
 import { UMB_CURRENT_USER_CONTEXT, UmbCurrentUserModel } from "@umbraco-cms/backoffice/current-user";
-import { whoAmI, whatsTheTimeMrWolf, whatsMyName, Iuser } from "../api/index.js";
+import { getWhoAmI, getWhatsTheTimeMrWolf, getWhatsMyName, WhoAmIResponseModel } from "../api/index.js";
 
 @customElement("example-dashboard")
 export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
@@ -20,7 +20,7 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
   private _timeFromMrWolf?: Date;
 
   @state()
-  private _serverUserData?: Iuser;
+  private _serverUserData?: WhoAmIResponseModel;
 
   @state()
   private _contextCurrentUser?: UmbCurrentUserModel;
@@ -52,16 +52,16 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
     const buttonElement = ev.target as UUIButtonElement;
     buttonElement.state = "waiting";
 
-    const { data, error } = await whoAmI();
+    const { data, error } = await getWhoAmI();
 
     if (error) {
       buttonElement.state = "failed";
       console.error(error);
       return;
     }
 
-    if (data !== undefined) {
-      this._serverUserData = data as Iuser;
+    if (data?.email) {
+      this._serverUserData = data;
       buttonElement.state = "success";
     }
 
@@ -80,7 +80,7 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
     buttonElement.state = "waiting";
 
     // Getting a string - should I expect a datetime?!
-    const { data, error } = await whatsTheTimeMrWolf();
+    const { data, error } = await getWhatsTheTimeMrWolf();
 
     if (error) {
       buttonElement.state = "failed";
@@ -98,7 +98,7 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
     const buttonElement = ev.target as UUIButtonElement;
     buttonElement.state = "waiting";
 
-    const { data, error } = await whatsMyName();
+    const { data, error } = await getWhatsMyName();
 
     if (error) {
       buttonElement.state = "failed";
@@ -120,8 +120,8 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
             : "Press the button!"}
         </h2>
         <ul>
-          ${this._serverUserData?.groups.map(
-            (group) => html`<li>${group.name}</li>`
+          ${this._serverUserData?.groups?.map(
+            (group) => html`<li>${group}</li>`
           )}
         </ul>
         <uui-button

templates/UmbracoExtension/Composers/UmbracoExtensionApiComposer.cs

@@ -16,6 +16,7 @@ public void Compose(IUmbracoBuilder builder) =>
             document => document
                 .WithTitle("Umbraco Extension Backoffice API")
                 .WithBackOfficeAuthentication()
+                .WithJsonOptions(Umbraco.Cms.Core.Constants.JsonOptionsNames.BackOffice)
                 .ConfigureOpenApiOptions(options =>
                     options.AddDocumentTransformer((doc, _, _) =>
                     {