Section

Posted: 2017-01-24 in Section

Use the section.requery() method OR set the section.sql property – not both, e.g.

// section.requery()
// Specify everything after the WHERE (apologies if I misled you on this syntax previously)

Code:
Lianja.get("page1.section2").requery([userid='{Lianja.get("page1.section1.field1").text}'] )

OR
// section.sql
// Specify the full SQL statement

Code:
Lianja.get("page1.section2").sql = [select * from <basetable> where userid='{Lianja.get("page1.section1.field1").text}']

If your current App is failing to load, use the Versions workspace to restore an earlier version of your prg or open the prg in an external editor and comment out the lines (//) of your section.ready() event delegate.


Q:
How to add objects to a custom section
A:

Code:
define class page1_section1 as section
enddefine
define class contTopStatusBar as container
        layout = "vertical"
        fixedheight = 40
        backcolor = "white"
        add object buttonTest as commandbutton

enddefine

proc page1_section1 
        page1_section1 = createobject("page1_section1")
        page1_section1.addobject("cont1", "contTopStatusBar")
        cont1.buttontest.caption = "Hello"
        page1_section1.addobject("cont2", "contTopStatusBar")
        cont2.buttontest.caption = "World"
return page1_section1

define class herbButton as commandbutton
proc click()
Lianja.showMessage("Button was clicked")
endproc 

enddefine

define class contTopStatusBar as container
layout = "vertical"
fixedheight = 40
backcolor = "white"
add object buttontest as herbButton

enddefine

proc page1_section1 
page1_section1 = createobject("page1_section1")

page1_section1.addobject("cont1", "contTopStatusBar")
cont1.buttontest.caption = "Hello"
page1_section1.addobject("cont2", "contTopStatusBar")
cont2.buttontest.caption = "World"

return page1_section1

Q:
The finished app has a section on the left hand side with such things as favourites, recently viewed which you can hide by clicking on the word hide. Is there any way of removing that whole section ? Also is it possible to remove the navigation buttons from the bottom of the page which relate to the customer records at the top ?
A:
Yes – that’s called the Left Sidebar. Look in the Page Attributes (cog icon or double-click on header) and in the Left Sidebar sub-section uncheck ‘Show left sidebar‘.
In the Page Attributes ‘Appearance’ sub-section you will find ‘Hide actionbar‘ – check that to remove the navigation buttons.


Q:
How do use hwnd to get the id for a section, or a gadget?
A:
In LianjaDemo, from the console:

Code:
lo = lianja.get("customers")
? lo.hwnd

Better to create a custom section, add a container that auto sizes into the section and use its hwnd. Why? Because it excludes the area occupied by the header, header menu and footer menu.


Q:
1. Adding the canvas and grid sections to my page works just fine but I cannot add a button to the canvas, the commented -out code just doesn’t work – am I doing something wrong?
2. Running this code as-is in the app builder (ie. forget the button part), I see the new sections but if I try to add any gadgets manually to the canvas (from the ‘Advanced’ menu option at the bottom of the app builder) then the IDE crashes (with the “lianja.exe has stopped working” message).

Code:
proc page1_section2_field2_click()

        //Get a reference to the page
        page = Lianja.getElementByID("page1")

        //Add a canvas section to the page
        page.AddSection("custCanvas", "canvas")
        canvasSection = Lianja.getElementByID("page1.custCanvas")
        canvasSection.caption = "New Canvas"

        //Add a button to the canvas
        /*NOT WORKING
        canvasSection.AddObject("myButton", "commandbutton")
        btn = Lianja.getElementByID("page1.custCanvas.myButton")
        btn.move(20,20,100,50)
        */
       
        //Add a grid section to the page
        page.AddSection("custGrid", "grid")
        gridSection = Lianja.getElementByID("page1.custGrid")
        gridSection.caption = "New Grid"

endproc

A:
You cannot create canvas sections dynamically using addobject().
Canvas sections are designed visually.
Custom sections are created dynamically


‘Enhanced “Form” section layout to provide a more compelling UI for Web/Mobile Apps using NoCode.’ — my understanding of this, in plain language, is that just about everything you want to design in an app will be doable in a Form section, and will be responsive.
With the new UI in 2.1, and the metadata enhancements, this takes app development to a new level. This is huge, as this is the first step toward using all the other stuff above.


Q:
On a canvas section I’m trying to insert some custom buttons mainly for navigation and basic actions. I’ve tried several ways but with no luck.
On exemple, for a “move to next record” button in a desktop app what I’m doing is to create a new page(page1), a new canvas section (section1), drop in some record fields, and then I insert a command button, typing in the Default action field of the control:

Code:
section:section1?action=next

.
When I click it, it seems that nothing happens, or almost the fields are not refreshing. How can I use the “default actions” in a button in the canvas section?
A:
If you put the code in the Click event delegate for your button that will work.

JavaScript:

Code:
////////////////////////////////////////////////////////////////
// Event delegate for 'click' event
function page1_section1_field1_click()
{
        showdocument("section:section1?action=next");
};

VFP (remember to use JavaScript if you want to run in the Lianja Web Client)

Code:
////////////////////////////////////////////////////////////////
// Event delegate for 'click' event
proc page1_section1_field1_click()
        showdocument("section:section1?action=next")endproc

A2:
It seems like you added a canvas section and then added some textfields, and some buttons.
I am using the southwind database in my example.

1. Drag the fields from the table you want onto the canvas from table itself. I have selected the ‘example’ table

2. Add your buttons.
3. In the button that you want to use to move the records forward, add the following code. On my section, I named them txtNext and txtPrior (not case sensitive in VFP).

Here is the code from click events.

Code:
// Event delegate for 'click' event
proc page1_section1_txtPrior_click()
select example
if not bof()
skip -1
Lianja.get("page1.section1").refresh
else
wait window " You are on the first record"
endif
endproc

////////////////////////////////////////////////////////////////
// Event delegate for 'click' event
proc page1_section1_txtNext_click()
select example
if not eof()
skip 1
Lianja.get("page1.section1").refresh
else
wait window " You are on the last record"
endif
endproc

Q:
when one would use the standard sections and when or why the custom?
A:
That’s a tough one to answer, because I think it’s based on personal preferences. Although there are some things like custom grid section menus, that have to be done via custom code (meaning create container -> add objects etc..).

The other differences to me boils down to 2 things.
1. Re-using custom classes.
2. Layout management

In a custom sections, you can re-use classes that you have saved in the library. I Know that version 3.1 will have a visual Component builder, but that is still in the pipeline.

Custom sections can resize themselves based on how you specify the layout.
Canvas sections are not naturally responsive -but you can resize them via code. That can be tough if you have many objects.

I don’t know which one I use more though, I think it also depends on what I am doing.
You really cant go wrong with either one.


This is a quick intro to using custom VFP sections in Lianja.
https://youtu.be/22KwE857M24


Hide a section at runtime


Here is an explanation of dilema standard-custom-canvas:

As you know there are a lot of pre-built sections and I always recommend that you look into using these standard sections as your first choice rather than coding.

The question you really have to answer first is “Where do I want these Apps I build to run“?

If you are targeting desktop only then I would say go ahead and use whatever you feel comfortable with.

If you build your apps out of the standard sections then it will pretty much run straight off in the cloud too.
These built-in sections have been chosen due to the fact that they are common high level building blocks that you can visually build your Apps out of.
Its a sort of lego for cross-UI database apps.
The standard sections that I would recommend you using the most (if at all possible) are; Form, Grid, Report, Chart, WebView, Calendar, Attachment, ImageStrip, and TabView.

There are obvious tradeoffs that you have to make if you want your apps to be desktop, web and mobile — and after all, thats what Lianja is all about — apart from the cross platform nature of it; Windows, Mac and Linux.

“Custom sections” are code centric.
They can be developed in the Visual FoxPro compatible scripting, PHP, Python or JavaScript — whatever you are comfortable with in fact.

Canvas sections do not have the same level of functionality as you have in the page builder when you are visually designing pages out of forms, grids and webviews.
You have to basically “paint” them yourself — hence the name “Canvas”.

It is important to understand that just because it is not immediately apparent how to do something in standard sections not to assume that the standard sections can’t do it.
I don’t see building apps using standard sections without coding as being for beginners.
The idea is that domain knowledge developers should be able to build an App with minimal coding.

You can move fields around in form sections and separate them into columns using dividers.

To build a composite form you would use two sections one above the other and “Hide the section headers”.

You can change values in other fields as data is entered now.

You can build form sections into horizontal columns using the dividers i mention above to separate the form off into columns.

…you have “rules” that control “Visibility” and “Readonly” that are evaluated as data is displayed and entered in the form so the form can re-arrange itself.

…the section footer can contain hyperlinks that can be clicked and change the “State” in which the form is in. This can hide/show certain fields.

When working with Canvas, think Container: the Container moves controls around the same way as Form sections.

You can designate a Canvas section to be displayed only for desktop and web (big tablets); and have an alternate Form section that you designate only for Mobile (phones, small tablets). That’s controlled by section by the checkboxes at the bottom of the Section attributes.


Q:
how to hide/show a single element in a section?
I understand how to hide pages and sections. For some reason, I cannot find a reference to it hiding and showing a single element. I am trying to hide a textbox upon data change of another textbox.

Code:
proc Generate_line_detail_stkno_changed()
quantity.hide
getlineitemfrompricelist()
endproc

A:
Try this:

Code:
// Event delegate for 'changed' event
proc page1_section1_field1_changed()
    quantity=Lianja.get("quantity")
    quantity.hide
endproc

In App inspector you can see your quantity field is fully qualified as:

page: page1.section1.quantity

or in your case, I suppose:

page: Generate_line.detail.quantity

To apply “hide”, you need to reference this field object by Lianja.get(…), not by name only.

Shorten way:

Code:
// Event delegate for 'changed' event
proc page1_section1_field1_changed()
    Lianja.get("quantity").hide
endproc

Q:
I want a section initially hidden upon system start up. Where should I place this code?

Code:
showdocument("section:section1?action=hide")

I tried to place it in the ready delegate of the section itself and in the ready delegate of the page where the section is located but got the same behavior the section was not hidden upon the system start up.
Also, I tried to place the same code on the click delegate of the cancel button and the section was hidden upon clicking the cancel button.
A:
I put your code

Code:
showdocument("section:section1?action=hide")

in page’s ready delegate of lianja_mobiledemo, and deployed it.
After that, in App Center the Section1 is not showing at start. As expected.

In development views in Lianja App Builder it is showing.
These are only development (pre)views and they can not 100% replace real runtime environment.
If they could, then we would not need Page Center on development machine.



Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s