update plugin view label

AppBuilder/platform/plugins/included/index.js

@@ -2,8 +2,9 @@ import viewImage from "./view_image/FNAbviewimage.js";
 import viewText from "./view_text/FNAbviewtext.js";
 import viewList from "./view_list/FNAbviewlist.js";
 import viewTab from "./view_tab/FNAbviewtab.js";
+import viewLabel from "./view_label/FNAbviewlabel.js";
 
-const AllPlugins = [viewTab, viewList, viewImage, viewText];
+const AllPlugins = [viewTab, viewList, viewLabel, viewImage, viewText];
 
 export default {
    load: (AB) => {

AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js

@@ -0,0 +1,83 @@
+export default function FNAbviewLabelComponent({
+   // AB,
+   ABViewComponentPlugin,
+}) {
+   return class ABViewLabelComponent extends ABViewComponentPlugin {
+      constructor(baseView, idBase, ids) {
+         super(
+            baseView,
+            idBase || `ABViewLabel_${baseView.id}`,
+            Object.assign(
+               {
+                  template: "",
+               },
+               ids,
+            ),
+         );
+      }
+
+      /**
+       * @method ui
+       * return the Webix UI definition for this component.
+       * @return {object} Webix UI definition
+       */
+      ui() {
+         const baseView = this.view
+         baseView.text = baseView.text || this.view.settings.text
+         this.settings = this.view.settings
+
+         const _ui = super.ui([
+            this.uiFormatting({
+               view: "label",
+               label: baseView.text || "*",
+               align: this.settings.alignment,
+               type: {
+                  height: "auto",
+               },
+            }),
+         ]);
+
+         delete _ui.type;
+
+         return _ui;
+      }
+      /**
+       * @method uiFormatting
+       * a common routine to properly update the displayed label
+       * UI with the css formatting for the given .settings
+       * @param {obj} _ui the current webix.ui definition
+       * @return {obj} a properly formatted webix.ui definition
+       */
+      uiFormatting(ui) {
+         // add different css settings based upon it's format
+         // type.
+         this.settings = this.view.settings
+         switch (parseInt(this.settings.format)) {
+            // normal
+            case 0:
+               ui.css = "ab-component-label ab-ellipses-text";
+               break;
+
+            // title
+            case 1:
+               ui.css = "ab-component-header ab-ellipses-text";
+               break;
+
+            // description
+            case 2:
+               ui.css = "ab-component-description ab-ellipses-text";
+               break;
+         }
+
+         return ui;
+      }
+      /**
+       * @method onShow
+       * called when the component is shown.
+       * perform any additional initialization here.
+       */
+      onShow() {
+         super.onShow();
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js

@@ -0,0 +1,167 @@
+import FNAbviewLabelComponent from "./FNAbviewLabelComponent.js";
+
+
+// FNViewLabel Web
+// A web side import for an ABView.
+//
+export default function FNViewLabel({
+   /*AB,*/
+   ABViewWidgetPlugin,
+   ABViewPlugin,
+   ABViewComponentPlugin,
+}) {
+   const ABViewLabelComponent = FNAbviewLabelComponent({ ABViewComponentPlugin });
+
+
+   // Define the default values for this components settings:
+   // when a new instance of your widget is created, these values will be
+   // the default settings
+   const ABViewLabelComponentDefaults = {
+      text: "", // {string}
+      format: 0,
+      alignment: "left",
+   };
+
+   // Define the Default Values for this ABView
+   // These are used by the platform and ABDesigner to display the view.
+   const ABViewDefaults = {
+      key: "label", // {string} unique key for this view
+      icon: "font", // {string} fa-[icon] reference for this view
+      labelKey: "Label", // {string} the multilingual label key for the class label
+   };
+
+   class ABViewLabelCore extends ABViewWidgetPlugin {
+      constructor(values, application, parent, defaultValues) {
+         super(values, application, parent, defaultValues || ABViewDefaults);
+      }
+
+      /**
+       * @method common
+       * return the common values for this view.
+       * @return {obj} common values
+       */
+      static common() {
+         return ABViewDefaults;
+      }
+
+      /**
+       * @method defaultValues
+       * return the default values for this view.
+       * @return {obj} default values
+       */
+      static defaultValues() {
+         return ABViewLabelComponentDefaults;
+      }
+
+      /**
+       * @method toObj()
+       * properly compile the current state of this ABView instance
+       * into the values needed for saving to the DB.
+       * @return {json}
+       */
+      toObj() {
+         // NOTE: ABView auto translates/untranslates "label"
+         // add in any additional fields here:
+         this.unTranslate(this, this, ["text"]);
+
+         var obj = super.toObj();
+         obj.views = [];
+         return obj;
+      }
+      /**
+       * @method fromValues()
+       *
+       * initialze this object with the given set of values.
+       * @param {obj} values
+       */
+      fromValues(values) {
+         super.fromValues(values); // <-- this performs the translations
+         this.settings = this.settings || {};
+
+         // if this is being instantiated on a read from the Property UI,
+         // .text is coming in under .settings.label
+         this.text = values.text || values.settings.text || "*text";
+
+         this.settings.format =
+            this.settings.format || ABViewLabelPropertyComponentDefaults.format;
+         this.settings.alignment =
+            this.settings.alignment ||
+            ABViewLabelPropertyComponentDefaults.alignment;
+
+         // we are not allowed to have sub views:
+         this._views = [];
+
+         // convert from "0" => 0
+         this.settings.format = parseInt(this.settings.format);
+
+         // NOTE: ABView auto translates/untranslates "label"
+         // add in any additional fields here:
+         this.translate(this, this, ["label", "text"]);
+      }
+
+      /**
+       * @method componentList
+       * return the list of components available on this view to display in the editor.
+       */
+      componentList() {
+         // other components cannot be placed inside
+         return [];
+      }
+      //// Allow external interface to manipulate our settings:
+      /**
+       * @method formatNormal
+       * display text in the normal format.
+       */
+      formatNormal() {
+         this.settings.format = 0;
+      }
+
+      /**
+       * @method formatTitle
+       * display text as a Title.
+       */
+      formatTitle() {
+         this.settings.format = 1;
+      }
+
+      /**
+       * @method formatDescription
+       * display text as a description.
+       */
+      formatDescription() {
+         this.settings.format = 2;
+      }
+      warningsEval() {
+         super.warningsEval();
+
+         if (!this.text) {
+            this.warningsMessage("has no text value set.");
+         }
+      }
+   }
+
+   return class ABViewLabel extends ABViewLabelCore {
+      constructor(...params) {
+         super(...params);
+      }
+
+      /**
+       * @method getPluginKey
+       * return the plugin key for this view.
+       * @return {string} plugin key
+       */
+      static getPluginKey() {
+         return "label";
+      }
+
+      /**
+       * @method component()
+       * return a UI component based upon this view.
+       * @return {obj} UI component
+       */
+      component(parentId) {
+         return new ABViewLabelComponent(this, parentId);
+      }
+   };
+}
+

AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js

@@ -68,7 +68,7 @@ export default function FNAbviewtext({
       /**
        * @method toObj()
        *
-       * properly compile the current state of this ABViewLabel instance
+       * properly compile the current state of this ABViewText instance
        * into the values needed for saving.
        *
        * @return {json}