Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM 6.2 classic : Threshold plugin with textfield xtype

Avatar

Level 8

Hi All,

Guess, there is a Threshold plugin, which when used with RTE, displays an icon in the RTE toolbar indicating whether or not the text content has passed a set of thresholds.The plugin can be configured with a defaultColor configuration property(defaults to green) which will be used when none of the thresholds has been reached.The thresholds themselves are populated by a thresholds configuration property which  is a multivalued property 10;yellow, 30;red,which indicates that if there are more than 10 characters, but less than 30,the icon should be yellow and if there are more than 30 characters, the icon should be red.

<thresholds

jcr:primaryType="nt:unstructured"

features="[thresholds]"

thresholds="[10;yellow,30;red]"/>

We need to use this with xtype=textfield. Not sure how is this to be done.

Any thoughts/pointers/reference code will be helpful.

1 Accepted Solution

Avatar

Correct answer by
Level 3

The way I see it you have these options and you should go with whichever you feel is apropriate:

- just set the max length in your textfield or add a description advising the author the recommended number of characters - this saves development time but adds some responsibility on the authors

- implement something custom using the textfield with similar functionality - this is your ideal option but requires the most development work

- use the existing plugin in an rte with all other options removed/disabled and when saving the content or when using it remove the <p> tag - this shouldn't require a lot of work but is not the cleanest solution

View solution in original post

5 Replies

Avatar

Level 8

Some additional info :

This is supposed to work fine with RTE. How can I use this with textfield now. Any thoughts will be helpful.

--------------------------------------------------------------------------------------------------------------------

CQ.Ext.namespace("EXAMPLE.CQ.rte");

/**

* Rich Text Editor plugin which displays an icon in the RTE toolbar

* indicating whether or not the text content has passed a set of

* thresholds.

*

* The plugin can be configured with a defaultColor configuration property

* (defaults to green) which will be used when none of the thresholds has been reached.

*

* The thresholds themselves are populated by a thresholds configuration

* property. This is a multivalued property like this:

* 10;yellow

* 30;red

*

* which indicates that if there are more than 10 characters, but less than 30,

* the icon should be yellow and if there are more than 30 characters, the

* icon should be red.

*/

EXAMPLE.CQ.rte.ThresholdsPlugin = CQ.Ext.extend(CQ.form.rte.plugins.Plugin, {

    /**

     * @private

     */

    indicatorUI: null,

   

    /**

     * @private

     */

    thresholds: null,

   

   

    constructor: function(editorKernel) {

        EXAMPLE.CQ.rte.ThresholdsPlugin.superclass.constructor.call(this, editorKernel);

    },

    getFeatures: function() {

        return [ "thresholds" ];

    },

   

    notifyPluginConfig: function(pluginConfig) {

        var plugin = this;

        pluginConfig = pluginConfig || { };

        CQ.Util.applyDefaults(pluginConfig, {

            "tooltips": {

                "thresholds": {

                    "title": CQ.I18n.getMessage("Thresholds"),

                    "text": CQ.I18n.getMessage("Indicates the length of the text relative to the configured thresholds")

                }

            },

            "defaultColor" : "green"

        });

        this.thresholds = [];

        if (pluginConfig.thresholds) {

            $CQ.each(pluginConfig.thresholds, function(index, value) {

                if (value.indexOf(";") !== -1) {

                    var parts = value.split(";");

                    plugin.thresholds.push({

                        "lowerBoundary" : parseInt(parts[0]),

                        "color" : parts[1]

                    });

                }

            });

        }

        if (this.thresholds.length) {

            pluginConfig.features = "*";

        }

        this.config = pluginConfig;

    },

   

    updateState: function(selDef) {

        if (this.indicatorUI &&

                this.indicatorUI.getExtUI() &&

                this.indicatorUI.getExtUI().btnEl) {

            var newColor = this.config.defaultColor;

           

            // get the HTML from the editor

            var currentText = this.editorKernel.getProcessedHtml();

           

            // then strip the HTML

            currentText = CQ.Ext.util.Format.stripTags(currentText);

            currentText = currentText.replace(/ /g, "");

           

            // then remove the extra whitespace

            currentText = CQ.Util.trim(currentText.replace(/^\s+$/g," "));

           

            $CQ.each(this.thresholds, function(index, value) {

                if (currentText.length >= value.lowerBoundary) {

                    newColor = value.color;

                }

            });

           

            this.indicatorUI.getExtUI().btnEl.setStyle("background-color", newColor);

        }

    },

   

    initializeUI: function(tbGenerator) {

        var plg = CQ.form.rte.plugins;

        var ui = CQ.form.rte.ui;

        if (this.isFeatureEnabled("thresholds")) {

            this.indicatorUI = new ui.TbElement("thresholds", this, false,

                    this.getTooltip("thresholds"));

            tbGenerator.addElement("thresholds", plg.Plugin.SORT_LINKS, this.indicatorUI, 10);

        }

    }

   

});

CQ.form.rte.plugins.PluginRegistry.register("thresholds", EXAMPLE.CQ.rte.ThresholdsPlugin);

Avatar

Level 10

What is happening with this code.

Can you point the community to the online resource about Threshold plugin? I have never heard of this in 7 yrs of working with AEM.

Avatar

Level 8

Hi Scott,

Do not have additional info to share on this.

We are looking for some other alternatives. So,there will be no updates from my end on this thread.

Avatar

Correct answer by
Level 3

The way I see it you have these options and you should go with whichever you feel is apropriate:

- just set the max length in your textfield or add a description advising the author the recommended number of characters - this saves development time but adds some responsibility on the authors

- implement something custom using the textfield with similar functionality - this is your ideal option but requires the most development work

- use the existing plugin in an rte with all other options removed/disabled and when saving the content or when using it remove the <p> tag - this shouldn't require a lot of work but is not the cleanest solution