AppGini Community Forums

Posted: **2023-05-07 19:56**

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.

Posted: **2023-05-08 04:46**

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 13218 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/

Posted: **2023-05-08 12:50**

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:

Posted: **2023-05-09 04:15**

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

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 13184 times

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 13184 times

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 13184 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 13184 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 13184 times

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

Posted: **2023-05-09 13:11**

great Jan,

thanks for all your kind and most profesional support.

Shay.

AppGini Community Forums

rich (html) area in custom Tabs

rich (html) area in custom Tabs

Re: rich (html) area in custom Tabs

Re: rich (html) area in custom Tabs

Re: rich (html) area in custom Tabs

Re: rich (html) area in custom Tabs