What does the form layout option for container do?

[HankFay]

In a custom section, assuming I have the following code:

oSection = createobject("oSection", "section");
oSection.addobject("oContMain","container");
oContMain.layout = "grid";
oContMain.spacing = 50;
oContMain.addobject("oContPOInfo","container",0,0,1,1);
oContMain.layout = "form";

What behavior should I expect from the layout? I can't get it to display a label, or a form item, so I'm obviously missing something.

thanks,

Hank

[barrymavin]

To better understand layouts I will explain with an example from 4.1.

Here we have a "Smart Grid".



The "Employee Details" column of the grid has a "Cell display delegate" and an "Cell editor delegate".

Clicking on the "EDIT" button causes the "Cell editor delegate" to embed a "form" in the grid cell.



Notice that this "Cell editor delegate" creates a form dynamically and embeds it in the grid cell.

The JavaScript code for this is:

////////////////////////////////////////////////////////////////
// Custom editor for column 'section1.column5'
function page1_section1_column5_customeditor(controlsource,row,col)
{
var employees = Lianja.getCursor("employees");
econt = createObject("econt","container");
econt.layout = "Form";
econt.addRow("", "formheading", "label");
formheading.caption = "EDIT EMPLOYEE DETAILS";
formheading.fontsize = 12;
formheading.alignment = "center";
formheading.backcolor = "lightslategray";
formheading.forecolor = "white";
econt.addRow("First Name:", "firstname", "textbox");
firstname.controlsource = "employees.firstname";
econt.addRow("Last Name:", "lastname", "textbox");
lastname.controlsource = "employees.lastname";
econt.addRow("Address:", "address", "textbox");
address.controlsource = "employees.address";
econt.addRow("City:", "city", "textbox");
city.controlsource = "employees.city";
econt.addRow("Region:", "region", "textbox");
region.controlsource = "employees.region";
econt.addRow("Postcode:", "postalcode", "textbox");
postalcode.controlsource = "employees.postalcode";
econt.addRow("Country:", "country", "textbox");
country.controlsource = "employees.country";
econt.backcolor = "lightgray";
econt.addRow("", "buttons", "container");
buttons.backcolor = "lightgray";
buttons.layout = "Horizontal";
buttons.spacing = 5;
buttons.addObject("cancelbtn", "commandbutton");
cancelbtn.caption = "Cancel";
// set the stylesheet classes for the button to theme it like a bootstrap button
cancelbtn.stylesheet = "btn btn-sm btn-block btn-default";
cancelbtn.click = function()
{
Lianja.get("page1.section1").grid.cancel();
};
buttons.addObject("savebtn", "commandbutton");
savebtn.caption = "Save";
// set the stylesheet classes for the button to theme it like a bootstrap button
savebtn.stylesheet = "btn btn-sm btn-block btn-default";
savebtn.click = function()
{
Lianja.get("page1.section1").grid.save();
};
buttons.minheight = 34;
econt.fixedheight = 254;
return econt;
};

Notice how the "Form" is created using the addRow() method of the container which has a "Form" layout.

addRow("Address:", "address", "textbox");

addRow(caption as character, name as character, class as character)

If the "caption" is empty i.e. "" then nothing displays in the first column of the row.
The "name" is the name of the object variable to be created.
The "class" is the UI class e.g. textbox, combobox, etc

Now interestingly as with all of the UI layouts in Lianja (Desktop,Web and Mobile) you can add a "container" which can itself have its own layout.

An important feature of layouts is that they are responsive. Changing the size of the container will automatically relay the container out so there is no need to specify the position of the children components in the container as the layout manager will do it for you.

Hope that helps. See Understanding UI layouts in the documentation wiki for a more in depth explanation.

[HankFay]

Hi Barry,

fantastic, thanks,

Hank

[HankFay]

PS: for those who wonder where those colors for names come from: they are in the CSS Standard. Here's a handy list: https://www.w3schools.com/cssref/css_colors.asp

How did I find this? I was going to ask Barry and then thought, hey, what if there's a standard? One Google search and one URL click later, viola!

[phabio]

Hi Barry,
fantastic!

Can I add a scroll bar on the container?

thanks
Fabio

[barrymavin]

Currently not no. I think what is needed is a "scrollpanel" which you would add a container to. If the size of the container is larger than the scroll panel then the scrollbars would be visible otherwise hidden.

[barrymavin]

Hi Fabio,

If you would like a "scrollpanel" class then please submit an ER ticket.

[phabio]

Ok, added.
thanks
Fabio

[barrymavin]

I've added this into 4.1 now.

As stated in the roadmap:

Added a new class to the Lianja Framework "scrollpanel". Use this class to embed a large scrollable UIcontrol e.g. a "container" or an "image".

scroller = createObject("scrollpanel")
scroller.resize(200, 200)
scroller.addObject("cont", "container")
cont.resize(800, 600)

[HankFay]

Hi Barry,

is this also web/mobile?

thanks,

Hank