From 196fb7ec5bf3d80f7e0853013796e7f0216ac67a Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Tue, 17 Feb 2026 16:17:50 +0700 Subject: [PATCH 1/4] update plugin view label --- .../view_label/FNAbviewLabelComponent.js | 82 ++++++++++++ .../included/view_label/FNAbviewlabel.js | 126 ++++++++++++++++++ AppBuilder/platform/views/ABViewLabel.js | 25 ---- .../viewComponent/ABViewLabelComponent.js | 57 -------- 4 files changed, 208 insertions(+), 82 deletions(-) create mode 100644 AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js create mode 100644 AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js delete mode 100644 AppBuilder/platform/views/ABViewLabel.js delete mode 100644 AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js new file mode 100644 index 00000000..94fc4cd0 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js @@ -0,0 +1,82 @@ +export default function FNViewLabelComponent({ + // 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 = 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. + 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(); + } + }; +} diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js new file mode 100644 index 00000000..d2e7709f --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js @@ -0,0 +1,126 @@ +import FNViewLabelComponent from "./FNAbviewLabelComponent.js"; + + +// FNViewLabel Web +// A web side import for an ABView. +// +export default function FNViewLabel({ + /*AB,*/ + ABViewPlugin, + ABViewComponentPlugin, +}) { + const ABViewLabelComponent = FNViewLabelComponent({ 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: "", + }; + + // 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: "Plugin ab-view-view-label", + // {string} + // the multilingual label key for the class label + }; + + /// + /// We return the ABView here + /// + return class ABViewLabel extends ABViewPlugin { + // constructor(...params) { + // super(...params); + // } + + /** + * @method getPluginKey + * return the plugin key for this view. + * @return {string} plugin key + */ + static getPluginKey() { + return "ab-view-view-label"; + } + + /** + * @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 component() + * return a UI component based upon this view. + * @return {obj} UI component + */ + component(parentId) { + return new ABViewLabelComponent(this, parentId); + } + + /** + * @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.settings = this.settings || {}; + + // NOTE: ABView auto translates/untranslates "label" + // add in any additional fields here: + // this.translate(this, this, ["text"]); + } + + /** + * @method componentList + * return the list of components available on this view to display in the editor. + */ + componentList() { + // NOTE: if your component allows other components to be placed inside, then + // return the list of components that are allowed to be placed inside. + // otherwise return an empty array. + return []; + } + }; +} + diff --git a/AppBuilder/platform/views/ABViewLabel.js b/AppBuilder/platform/views/ABViewLabel.js deleted file mode 100644 index 6577b850..00000000 --- a/AppBuilder/platform/views/ABViewLabel.js +++ /dev/null @@ -1,25 +0,0 @@ -const ABViewLabelCore = require("../../core/views/ABViewLabelCore"); -const ABViewLabelComponent = require("./viewComponent/ABViewLabelComponent"); - -module.exports = class ABViewLabel extends ABViewLabelCore { - constructor(values, application, parent, defaultValues) { - super(values, application, parent, defaultValues); - } - - /** - * @method component() - * return a UI component based upon this view. - * @return {obj} UI component - */ - component() { - return new ABViewLabelComponent(this); - } - - warningsEval() { - super.warningsEval(); - - if (!this.text) { - this.warningsMessage("has no text value set."); - } - } -}; diff --git a/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js b/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js deleted file mode 100644 index 1ed8766d..00000000 --- a/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js +++ /dev/null @@ -1,57 +0,0 @@ -const ABViewComponent = require("./ABViewComponent").default; - -module.exports = class ABViewLabelComponent extends ABViewComponent { - constructor(baseView, idBase, ids) { - super(baseView, idBase || `ABViewLabel_${baseView.id}`, ids); - } - - ui() { - const baseView = this.view; - - const _ui = super.ui([ - this.uiFormatting({ - view: "label", - // css: 'ab-component-header ab-ellipses-text', - 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. - 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; - } -}; From abbb98de208de47acb027943e913e8e11db229b8 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Wed, 18 Feb 2026 09:58:22 +0700 Subject: [PATCH 2/4] fix imports --- AppBuilder/core | 2 +- AppBuilder/platform/plugins/included/index.js | 3 ++- .../platform/plugins/included/view_label/FNAbviewlabel.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/AppBuilder/core b/AppBuilder/core index 033d062a..c93e36c8 160000 --- a/AppBuilder/core +++ b/AppBuilder/core @@ -1 +1 @@ -Subproject commit 033d062ac13b1b720955016e10fe146d0523c759 +Subproject commit c93e36c859393d73660c0a6d63c85ab65a5c7c10 diff --git a/AppBuilder/platform/plugins/included/index.js b/AppBuilder/platform/plugins/included/index.js index 1d707c93..203d2be0 100644 --- a/AppBuilder/platform/plugins/included/index.js +++ b/AppBuilder/platform/plugins/included/index.js @@ -1,7 +1,8 @@ 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]; +const AllPlugins = [viewTab, viewList, viewLabel]; export default { load: (AB) => { diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js index d2e7709f..ad38df2e 100644 --- a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js @@ -30,7 +30,7 @@ export default function FNViewLabel({ // {string} // fa-[icon] reference for this view - labelKey: "Plugin ab-view-view-label", + labelKey: "View Label", // {string} // the multilingual label key for the class label }; @@ -49,7 +49,7 @@ export default function FNViewLabel({ * @return {string} plugin key */ static getPluginKey() { - return "ab-view-view-label"; + return "label"; } /** From ebe8b3ac2c9d6230b73ef01d9187940ff05dcc1c Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Wed, 18 Feb 2026 18:39:19 +0700 Subject: [PATCH 3/4] add core functionality --- .../view_label/FNAbviewLabelComponent.js | 2 +- .../included/view_label/FNAbviewlabel.js | 146 +++++++++++------- 2 files changed, 92 insertions(+), 56 deletions(-) diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js index 94fc4cd0..0bd95cc4 100644 --- a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js @@ -1,4 +1,4 @@ -export default function FNViewLabelComponent({ +export default function FNAbviewLabelComponent({ // AB, ABViewComponentPlugin, }) { diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js index ad38df2e..b8fb78ed 100644 --- a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js @@ -1,4 +1,4 @@ -import FNViewLabelComponent from "./FNAbviewLabelComponent.js"; +import FNAbviewLabelComponent from "./FNAbviewLabelComponent.js"; // FNViewLabel Web @@ -6,50 +6,33 @@ import FNViewLabelComponent from "./FNAbviewLabelComponent.js"; // export default function FNViewLabel({ /*AB,*/ + ABViewWidgetPlugin, ABViewPlugin, ABViewComponentPlugin, }) { - const ABViewLabelComponent = FNViewLabelComponent({ 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: "", + 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 }; // 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: "View Label", - // {string} - // the multilingual label key for the class label + 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 }; - /// - /// We return the ABView here - /// - return class ABViewLabel extends ABViewPlugin { - // constructor(...params) { - // super(...params); - // } - - /** - * @method getPluginKey - * return the plugin key for this view. - * @return {string} plugin key - */ - static getPluginKey() { - return "label"; + class ABViewLabelCore extends ABViewPlugin { + constructor(values, application, parent, defaultValues) { + super(values, application, parent, defaultValues || ABViewDefaults); } /** @@ -69,6 +52,37 @@ export default function FNViewLabel({ static defaultValues() { return ABViewLabelComponentDefaults; } + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); // <-- this performs the translations + console.assert(this.settings) + 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, ["text"]); + } /** * @method component() @@ -79,6 +93,54 @@ export default function FNViewLabel({ return new ABViewLabelComponent(this, parentId); } + /** + * @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; + } + } + + 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 toObj() * properly compile the current state of this ABView instance @@ -95,32 +157,6 @@ export default function FNViewLabel({ return obj; } - /** - * @method fromValues() - * - * initialze this object with the given set of values. - * @param {obj} values - */ - fromValues(values) { - super.fromValues(values); - - this.settings = this.settings || {}; - - // NOTE: ABView auto translates/untranslates "label" - // add in any additional fields here: - // this.translate(this, this, ["text"]); - } - - /** - * @method componentList - * return the list of components available on this view to display in the editor. - */ - componentList() { - // NOTE: if your component allows other components to be placed inside, then - // return the list of components that are allowed to be placed inside. - // otherwise return an empty array. - return []; - } }; } From d93b47d4219ade7de79c5363ed2822bf0310706b Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Thu, 19 Feb 2026 17:29:27 +0700 Subject: [PATCH 4/4] update defaults --- AppBuilder/core | 2 +- .../view_label/FNAbviewLabelComponent.js | 3 +- .../included/view_label/FNAbviewlabel.js | 63 ++++++++++--------- .../included/view_text/FNAbviewtext.js | 2 +- 4 files changed, 38 insertions(+), 32 deletions(-) diff --git a/AppBuilder/core b/AppBuilder/core index c93e36c8..24cab350 160000 --- a/AppBuilder/core +++ b/AppBuilder/core @@ -1 +1 @@ -Subproject commit c93e36c859393d73660c0a6d63c85ab65a5c7c10 +Subproject commit 24cab35009a9f79ab20fe6e9f8cddfac1664f68e diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js index 0bd95cc4..754413a9 100644 --- a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js @@ -23,7 +23,7 @@ export default function FNAbviewLabelComponent({ */ ui() { const baseView = this.view - baseView.text = this.view.settings.text + baseView.text = baseView.text || this.view.settings.text this.settings = this.view.settings const _ui = super.ui([ @@ -51,6 +51,7 @@ export default function FNAbviewLabelComponent({ 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: diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js index b8fb78ed..afecaaa5 100644 --- a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js @@ -17,9 +17,9 @@ export default function FNViewLabel({ // when a new instance of your widget is created, these values will be // the default settings const ABViewLabelComponentDefaults = { - 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 + text: "", // {string} + format: 0, + alignment: "left", }; // Define the Default Values for this ABView @@ -27,10 +27,10 @@ export default function FNViewLabel({ 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 + labelKey: "Label", // {string} the multilingual label key for the class label }; - class ABViewLabelCore extends ABViewPlugin { + class ABViewLabelCore extends ABViewWidgetPlugin { constructor(values, application, parent, defaultValues) { super(values, application, parent, defaultValues || ABViewDefaults); } @@ -52,6 +52,22 @@ export default function FNViewLabel({ 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() * @@ -60,7 +76,6 @@ export default function FNViewLabel({ */ fromValues(values) { super.fromValues(values); // <-- this performs the translations - console.assert(this.settings) this.settings = this.settings || {}; // if this is being instantiated on a read from the Property UI, @@ -81,16 +96,7 @@ export default function FNViewLabel({ // NOTE: ABView auto translates/untranslates "label" // add in any additional fields here: - this.translate(this, this, ["text"]); - } - - /** - * @method component() - * return a UI component based upon this view. - * @return {obj} UI component - */ - component(parentId) { - return new ABViewLabelComponent(this, parentId); + this.translate(this, this, ["label", "text"]); } /** @@ -125,6 +131,13 @@ export default function FNViewLabel({ formatDescription() { this.settings.format = 2; } + warningsEval() { + super.warningsEval(); + + if (!this.text) { + this.warningsMessage("has no text value set."); + } + } } return class ABViewLabel extends ABViewLabelCore { @@ -142,21 +155,13 @@ export default function FNViewLabel({ } /** - * @method toObj() - * properly compile the current state of this ABView instance - * into the values needed for saving to the DB. - * @return {json} + * @method component() + * return a UI component based upon this view. + * @return {obj} UI component */ - 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; + component(parentId) { + return new ABViewLabelComponent(this, parentId); } - }; } diff --git a/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js b/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js index 9f4ebcab..7d7426a2 100644 --- a/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js +++ b/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}