Add Detail Widget as plugin

src/plugins/index.js

@@ -1,8 +1,9 @@
 import viewListProperties from "./web_view_list/FNAbviewlist.js";
 import TabProperties from "./web_view_tab/FNAbviewtab.js";
 import TabEditor from "./web_view_tab/FNAbviewtabEditor.js";
+import viewDetailProperties from "./web_view_detail/FNAbviewdetail.js";
 
-const AllPlugins = [TabProperties, TabEditor, viewListProperties];
+const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewDetailProperties];
 
 export default {
    load: (AB) => {

src/plugins/web_view_detail/FNAbviewdetail.js

@@ -0,0 +1,19 @@
+// Uses built-in Detail property panel so behavior matches built-in detail widget.
+// Thin wrapper to expose getPluginType/getPluginKey for pluginRegister.
+import FABViewDetail from "../../rootPages/Designer/properties/views/ABViewDetail";
+
+export default function FNAbviewdetailProperties(apiOrAB) {
+   const AB = apiOrAB?.AB ?? apiOrAB;
+   const ABViewDetailProperty = FABViewDetail(AB);
+
+   class ABViewDetailPropertyPlugin extends ABViewDetailProperty {
+      static getPluginType() {
+         return "properties-view";
+      }
+      static getPluginKey() {
+         return "detail";
+      }
+   }
+
+   return ABViewDetailPropertyPlugin;
+}

src/rootPages/Designer/properties/views/ABViewDetail.js

@@ -325,10 +325,13 @@ export default function (AB) {
       check(e, fieldId) {
          const ids = this.ids;
          const currView = this.CurrentView;
-         const detailView = currView.parentDetailComponent();
+         if (!currView) return;
+
+         const detailView = currView.parentDetailComponent?.() ?? currView;
 
          // update UI list
          const item = $$(ids.fields).getItem(fieldId);
+         if (!item) return;
          item.selected = item.selected ? 0 : 1;
          $$(ids.fields).updateItem(fieldId, item);
 
@@ -340,6 +343,17 @@ export default function (AB) {
 
          // add a field to the form
          if (item.selected) {
+            if (typeof currView.addFieldToDetail !== "function") {
+               this.AB?.message?.({
+                  text: L(
+                     "This detail view does not support adding fields. Try re-opening the page or use a new detail page."
+                  ),
+                  type: "error",
+               });
+               item.selected = 0;
+               $$(ids.fields).updateItem(fieldId, item);
+               return;
+            }
             const fieldView = currView.addFieldToDetail(item);
             if (fieldView) {
                fieldView.save().then(() => {