rich (html) area in custom Tabs

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
ushay
Veteran Member
Posts: 54
Joined: 2020-06-26 21:30

rich (html) area in custom Tabs

Post by ushay » 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.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: rich (html) area in custom Tabs

Post by jsetzer » 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
chrome_XcySAWWq1k.png (9.42 KiB) Viewed 2879 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/
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

ushay
Veteran Member
Posts: 54
Joined: 2020-06-26 21:30

Re: rich (html) area in custom Tabs

Post by ushay » 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:
Attachments
richtect.PNG
richtect.PNG (61.49 KiB) Viewed 2866 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: rich (html) area in custom Tabs

Post by jsetzer » 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
  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
    chrome_vKU0rRjnGP.png (18.66 KiB) Viewed 2845 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
    Zet7SBzh77.png (18.14 KiB) Viewed 2845 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
    chrome_kNQpwNIL9Y.png (21.6 KiB) Viewed 2845 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
chrome_bQfPDWRHXE.png (11.19 KiB) Viewed 2845 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
chrome_Aou6megPfj.png (14.26 KiB) Viewed 2845 times

From my point of view this looks quite pretty. I hope this helps.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

ushay
Veteran Member
Posts: 54
Joined: 2020-06-26 21:30

Re: rich (html) area in custom Tabs

Post by ushay » 2023-05-09 13:11

great Jan,

thanks for all your kind and most profesional support.

Shay.

Post Reply