Expand my Community achievements bar.

AEM 6.1 Table properties dialog and Table options shown

Avatar

Level 4

Hi All,

I have a couple of questions regarding the Table properties dialog and Table options which are shown after completing the steps below :-

1. Install aem6-author-p4502.jar
2. Browse to http://localhost:4502/siteadmin#/content/geometrixx-outdoors/en
3. Create a new page called "Testpage"
4. Browse to http://localhost:4502/editor.html/content/geometrixx-outdoors/en/testpage.html
5. Add a table component , Configure the table component , Click on Table properties icon

The default options shown in the Table properties dialog are Width, Height, Caption, Border, Cell padding, Cell spacing.

Is there any way to control or configure what options are shown in the Table properties dialog?

When the Table properties dialog is opened , how does it decide what options are available to show?

When the Table properties dialog is closed , how does it notify the rich text editor to update and re-render itself?

When the rich text editor updates / renders , how does it decide what table options are available to format the table?

Thank you for your time.

4 Replies

Avatar

Level 4

Is it possible to remove or hide or disable options which are shown in this Table properties dialog?

Thank you for your time.

Avatar

Level 10

Are you referring to this dialog? 

What controls the behaviour of this component is the code located here: 

/libs/foundation/components/table

Hi smacdonald2008,

Thank you for replying.

I am referring to the dialog which is displayed when you click on the Table Properties button.

The dialog shows the following options :-

    Width
    Height
    Caption
    Border
    Cell padding
    Cell spacing

I have found some information about this dialog in this article :-

http://experience-aem.blogspot.co.uk/2015/07/aem-61-extend-classic-ui-rich-text-table-plugin-add-sum...

This article includes the following line of Javascript code which I am currently investigating :-

var fields = dialog.findByType("form")[0];

Do you know if I can configure which of the defaults options are shown and hidden?

Thank you for your time.

I think I have a solution for this, which I am now testing.   Basically I have used the following article as a starting point :-

http://experience-aem.blogspot.co.uk/2015/07/aem-61-extend-classic-ui-rich-text-table-plugin-add-sum...

But I have replaced the Javascript code in the article with the Javascript code shown below :-

/* * JavaScript to remove AEM Table Properties which are not required for this AEM project. */ CQ.Ext.ns("ExperienceAEM"); /* The following AEM Table Properties are not required for this AEM project. */ var PROPERTY_NAMES_TO_BE_REMOVED = ["width" , "height" , "caption" , "border" , "cellpadding" , "cellspacing"]; /* Label to display on the Table Properties dialog only if there are NO properties to display. */ var LABEL_NO_PROPERTIES_NEED_CONFIGURING = "No table properties need configuring."; ExperienceAEM.ToolkitImpl = new Class({ toString: "EAEMToolkitImpl", extend: CUI.rte.ui.ext.ToolkitImpl, // Extend the dialog manager. createDialogManager: function(editorKernel) { return new ExperienceAEM.ExtDialogManager(editorKernel); } }); CUI.rte.ui.ToolkitRegistry.register("ext", ExperienceAEM.ToolkitImpl); ExperienceAEM.ExtDialogManager = new Class({ toString: "EAEMExtDialogManager", extend: CUI.rte.ui.ext.ExtDialogManager, createTablePropsDialog: function(cfg) { var dialog = this.superClass.createTablePropsDialog.call(this, cfg); var fields = dialog.findByType("form")[0]; var propertiesToBeRemoved = []; // Iterate through AEM Table Properties and decide which properties to remove. fields.items.each(function(item){ if (PROPERTY_NAMES_TO_BE_REMOVED.indexOf(item.name) > -1){ propertiesToBeRemoved.push(item); } }); // Remove superfluous AEM Table Properties. for (var i = 0, len = propertiesToBeRemoved.length; i < len; ++i){ fields.remove(propertiesToBeRemoved[i]); } // If there are No Table Properties remaining then add a label. if (fields.items.length===0){ fields.add({ "xtype": "static", "text": LABEL_NO_PROPERTIES_NEED_CONFIGURING }); } return dialog; } });