rich (html) area in custom Tabs

[ushay]

Hi ,

i tried to add a rich (html) area to a custom tabs but it spread all over the tab.
is it supported in custom Tabs?

shay.

[jsetzer]

Good morning,

I've just tested adding a text/richtext field to a tab and for me it works as expected:

chrome_XcySAWWq1k.png (9.42 KiB) Viewed 2785 times

This is the code in hooks/TABLENAME-dv.js:

Code: Select all

const dv = AppGiniHelper.DV;
dv.addTab("tabRichtextTest", "Tab", null, ["text_richtext"]);

The fieldname is text_richtext in this example.

Are there any errors in console and did you clear browser cache on reload?

Can you share a screenshot so we can see what's happening and perhaps post the errors (in console tab of your browser's dev-tool), if any.

https://appgini.bizzworxx.de/support/troubleshooting/

[ushay]

dear Jan,

thanks for your reply.

i need to add it as row together with other fields.

my code now:

Code: Select all

const dv = AppGiniHelper.DV;

var row_01 = dv.addLayout([6,5])
    .add(1, ["Status"]).sizeLabels(2);	
var row_02 = dv.addLayout([7,5])
    .add(1, ["Poject_val"]).sizeLabels(2);
var row_03 = dv.addLayout([7,4])	
	.add(1, ["billing_poten"]).sizeLabels(2);
var row_04 = dv.addLayout([7,4])
    .add(1, ["bill_cost"]).sizeLabels(2);


dv.addTab( "elec-tab", "חשמל", "flash" )
 .add(row_01).add(row_02).add(row_03).add(row_04);
 

status on raw 01 is the rich text field.

and this is what i get:

[jsetzer]

Good morning!

i tried to add a rich (html) area to a custom tabs but it spread all over the tab.

tl;dr
Adding richtext fields to custom tabs works as expected. Calling .sizeLabels() on custom multi-column layouts, which haven been added to custom tabs, causes an unexpected result.

But let us go step by step:

I'm using a test-database table here, having such "strange" field names like "text_richtext", "int", "double" etc. which is just for testing reaons on different datatypes.

file: hooks/TABLENAME-dv.js

1. First I create a row (AKA "Layout") with two columns:
   

   Code: Select all

   const dv = AppGiniHelper.DV;
   var row_01 = dv.addLayout([6, 6])
       .add(1, ["text_richtext"])
       .add(2, ["int", "float", "double", "decimal"]);
       

   Remember that, in Bootstraps 12-columns grid system, columns widths should sum up to 12, so I'm passing an integer array [6, 6] which creates two columns, 50% width each.
   

   

   chrome_vKU0rRjnGP.png (18.66 KiB) Viewed 2751 times

2. In next step I am creating a custom tab and adding the whole row to it. This is the complete code:

   Code: Select all

   const dv = AppGiniHelper.DV;
   var row_01 = dv.addLayout([6, 6])
       .add(1, ["text_richtext"])
       .add(2, ["int", "float", "double", "decimal"]);
   dv.addTab("tabTest", "Tab", null, [row_01]);
   

   

   Zet7SBzh77.png (18.14 KiB) Viewed 2751 times

3. Let's create another row with two columns. I have seen in your code that you are using a different widths-array, which is fine from technical point of view but may be confusing users.
   
   Anyway, here is another row with different widths [7, 5] instead of [6, 6]:
   

   Code: Select all

   const dv = AppGiniHelper.DV;
   
   var row_01 = dv.addLayout([6, 6])
       .add(1, ["text_richtext"])
       .add(2, ["int", "float", "double", "decimal"]);
   
   var row_02 = dv.addLayout([7, 5])
       .add(1, ["text_textarea"])
       .add(2, ["varchar", "char"]);
   
   dv.addTab("tabTest", "Tab", null, [row_01, row_02]);
   

   In the screenshow I have marked widths:
   
   

   

   chrome_kNQpwNIL9Y.png (21.6 KiB) Viewed 2751 times

---

Now, when calling .sizeLabels() on one of the rows inside the a custom tab (actually, I have never tried it because I have never needed it), it applies to the first column, only. This messes up the layout as you have shown in your screenshot:

Code: Select all

row_01.sizeLabels(2);

chrome_bQfPDWRHXE.png (11.19 KiB) Viewed 2751 times

Here is my recommendation:

• For design reasons I recommend using an identical column-width-array on all rows like [6, 6]
• Instead of .sizeLabels() maybe you should use .wrap() function on certain text-fields which gives more space for editing

Code: Select all

const dv = AppGiniHelper.DV;

var row_01 = dv.addLayout([6, 6])
    .add(1, ["text_richtext"])
    .add(2, ["int", "float", "double", "decimal"]);

var row_02 = dv.addLayout([6, 6])
    .add(1, ["text_textarea"])
    .add(2, ["varchar", "char"]);

dv.addTab("tabTest", "Tab", null, [row_01, row_02]);

dv.getFields(["text_richtext", "text_textarea"]).wrap();

chrome_Aou6megPfj.png (14.26 KiB) Viewed 2751 times

From my point of view this looks quite pretty. I hope this helps.

[ushay]

great Jan,

thanks for all your kind and most profesional support.

Shay.