Radio button do not show up in Collapse panel

[mdspine]

Hope anyone who reads this can help me
I am using appgini helper
I tried to make a collapse to contain all the fields
(This table has only collpase, I have not used any tabs )

for some odd reason
the
radio buttons are not showing in the collapse panel
All the other inputs like Text, Date show up, lookup fields show up

Any suggestions anyone
Thanks
Sam

[mdspine]

I think I found the answer
There are 2 ways to make radio buttons
1. Using choice option in appgini - If you make buttons via this approach, you can place the radio buttons in the collapse panel

Radio buttons using options

Capture2.PNG (27.5 KiB) Viewed 4096 times

2. Second approach is using lookup filed see attached - If you make buttons via this approach, you cannot place the radio buttons in the collapse panel
The conclusion is if you want to use radio buttons use options rather than lookup field if you want to have these radio buttons in a collapse panel
Thanks
Sam

[jsetzer]

Hi Sam,

usually, both types should work with collapsible panels.

There is one difference with lookups: they will be loaded dynamically and therefore those lookup fields do not exist, yet, when page is loading. So, if they do not exist, they cannot be moved into the panel. Our lib should handle this automatically. I will have a closer look at this issue and validate this.


For now, please check if there are any warnings or errors in console tab of dev tools which could block javascript from moving the fields.

If there are no errors, please try with putting you code in...

var dv = new AppGiniDetailView();
dv.ready(function() {
// your code here
});

Regards,
Jan

[mdspine]

Jan
Thank you for that extra bit of code that worked to include radiobuttons made through lookup field.
Thanks again for helping non-progammers like me
Sam

[jsetzer]

Hi Sam,
I'm happy to hear it works this way!
Regards,
Jan

[mdspine]

Jan,
Appreciate all your time, especially for making the collapse with radio button, that was a great help (you will see it named S1 and S2)

Capture.PNG (21.61 KiB) Viewed 3978 times

Howe ever the one collapse panel with the new code which you have helped me, I have difficulty putting it the tab

I did group other fields into collapse and put them in the Tabs it was easy no problem

Here is my code to create the collapse containing radio buttons

dv.ready(function() {
dv.addGroup(
"S1", "S1",

["Field1","Field2","Field3",],
Variation.warning);

});


Here is the code to create the row to be placed in the tabs

var row_NewRow = dv.addLayout([12])
.add(1, [S1" ])


Here is the code to create the tab
dv.addTab("Plan", "Plan", "Plan")
.add(row_NewRow);

Please advise if there is a mistake
Thanks

[jsetzer]

• There is a syntax error after field3: Comma too much.
• There is a syntax error near S1:
  Quotes

Please fix them first, then retry.

Check for other errors in console tab of dev tools.

I strongly recommend using a code editor with syntax highlighting like vscode.

[mdspine]

Jan
Thanks for responding
Thanks for your patience

I made a demo app on a Table called Test
see screen shot and link below
username: demo
password:****
Link removed

Capture.PNG (17.36 KiB) Viewed 3954 times

Here is the code in Test-dv.js


//Create Collapse//
var dv = new AppGiniDetailView();
dv.ready(function() {
dv.addGroup(
"DemographicInfoCollapse", "Demogahic Information", [
"FirstName",
"LastName",
"City",
"PMHmcq",
"DOB",
"Choice",
"DOBFormatted",
"Sex"

],
Variation.primary);
});


//Create Rows//

var row_Demographic = dv.addLayout([12])
.add(1, [
"DemographicInfoCollapse"

])

//Create Tabs///
dv.addTab("Subjective", "Subjective", "Subjective")
.add(row_Demographic);

dv.addTab("Objective", "Objective", "Objective")

dv.addTab("Assesment", "Assesment", "Assesment")
.add(row_Demographic);

dv.addTab("Plan", "Plan", "Plan")

Please advise if I need to add any extra bit of code
Thanks
Sam

[jsetzer]

This is a completely different code.

Did you fix the other syntax errors and did you follow my proposals?

• Please fix them first, then retry.
• Check for other errors in console tab of dev tools.
• I strongly recommend using a code editor with syntax highlighting like vscode.

Anyway:
There are ";" missing at the end of...

Code: Select all

dv.addTab("Objective", "Objective", "Objective")

and also

Code: Select all

dv.addTab("Plan", "Plan", "Plan")

[jsetzer]

Hi Sam,

• There are many warnings and even errrors in your detail view. Please fix them first!
• Please note, that Javascript may not continue executing the rest of the code if there are errors in the beginning.
• Once again, I strongly recommend using a code editor with syntax highlighting like vscode. Console tab and a modern IDE already show you syntax errors and give hints.
• There is no field named "DemographicInfoCollapse". So you cannot add a non-existing field to a layout.

  

  chrome_TiIsNBsKOe.png (1.69 KiB) Viewed 3944 times

• You should also update your version of AppGini Helper JS Library. Your version is outdated.
• I cannot see a field named "position" you are refering to. Is this really part of your table? To me it seems, you try to move that field which does not exists. Is it hidden in DV? This also means that we cannot get a handle for playing around with it. Where is field named "position"?

  

  chrome_H9doFUP5PW.png (1.58 KiB) Viewed 3944 times

• Ho to place layouts in tabs:
  https://appgini.bizzworxx.de/products/j ... view/tabs/

[jsetzer]

So, after you have fixed your errors, can you please explain what you want to achieve? The radio buttons are inside the collapsible panel now. Solved.

I guess you want a tab with a layout inside.

According to the docs:

(1) init dv

Code: Select all

var dv = new AppGiniDetailView();

(2) Create the layout and save a handle in a variable:

Code: Select all

var row_1 = dv.addLayout([12])
    .add(1, ["fieldname"])
    ;

(3) Create a tab and add the layout-handle

Code: Select all

dv.addTab("tabName", "tabCaption", "cog")
    .add(row_1);

Maybe you are just missing the variable of your layout?

Please remember: It is very important to fix errors first. Javascript will not continue executing the other commands after syntax errors in most of the cases!

Regards,
Jan

PS: It would be extremely helpful for us "helping hands" if you could always insert code in this forum like this:

chrome_U6SiwCELc9.png (2.94 KiB) Viewed 3940 times

[mdspine]

Jan

[mdspine]

Jan
Thanks for your patience!!

I was able to insert the collpase panels with radio buttons in the tab

Capture.PNG (4.3 KiB) Viewed 3903 times

The problem was the syntax
/your code
var row_1 = dv.addLayout([12])
.add(1, ["fieldname"])
;
//my code
var row_1 = dv.addLayout([12])
.add(1, ["NameOfCollapse"])
;

Thanks again for all your help
I will follow your advice you have given regarding VS code and console check errors
Sam

[jsetzer]

OK, I see. Maybe I should emphasize this in the docs.
Thanks for your response!