Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: Detecting click in a field  (Read 13989 times)
Lu?s T.
Posts: 39


« on: September 05, 2019, 06:45:07 pm »

I want to the following:
* display a record
* detect when the user click in a field

Suppose you have a invoice, where you the field customer. I want to display the form with the invoice and, if the user clicks in the field customer, open the customer form.

Ho do I do this?

Thanks

Luis
Reuben B.
Four Js
Posts: 1119


« Reply #1 on: September 10, 2019, 02:09:46 am »

There are a few approaches you can consider.

If you want to stick with a MENU, then you can make the fields a BUTTON using the presentation style buttonType=link, and use the ui.Form.setElementText method to render the field value (in your example the customer code and/or name) as the button text.  This will display the value with an underline like a link and provide a hint to the end-user they can click on this field and something will happen

So something like 4gl
Code
  1.    CALL ui.Window.getCurrent().getForm().setElementText("detail1",rec.field1)
  2.    CALL ui.Window.getCurrent().getForm().setElementText("detail2",rec.field2)
  3.    CALL ui.Window.getCurrent().getForm().setElementText("detail3",rec.field3)
  4.    MENU ""
  5.        ON ACTION detail1
  6.            CALL FGL_WINMESSAGE("Info", SFMT("Detail clicked in field %1", "field1"),"info")
  7.        ON ACTION detail2
  8.            CALL FGL_WINMESSAGE("Info", SFMT("Detail clicked in field %1", "field2"),"info")
  9.        ON ACTION detail3
  10.            CALL FGL_WINMESSAGE("Info", SFMT("Detail clicked in field %1", "field3"),"info")
  11.    END MENU

Form

Code
  1. GRID
  2. {
  3. Field1   [f01      ]
  4. Field2   [f02      ]
  5. Field3   [f03      ]
  6. }
  7. END
  8. END
  9. ATTRIBUTES
  10. BUTTON f01 : detail1, STYLE="link";
  11. BUTTON f02 : detail2, STYLE="link";
  12. BUTTON f03 : detail3, STYLE="link";

and 4st
Code
  1.  <Style name="Button.link">
  2.     <StyleAttribute name="buttonType" value="link" />
  3.  </Style>


if you don't mind using an INPUT then you also can use a NOTEDITABLE BUTTONEDIT.  This will display the value and have a small button to the right of the field the user can click on to get detail or drill down

Code
  1.   INPUT BY NAME rec.* ATTRIBUTES(WITHOUT DEFAULTS=TRUE)
  2.        ON ACTION detail
  3.            CALL FGL_WINMESSAGE("Info", SFMT("Detail clicked in field %1", FGL_DIALOG_GETFIELDNAME()),"info")
  4.    END INPUT

Code
  1. GRID
  2. {
  3. Field1   [f01      ]
  4. Field2   [f02      ]
  5. Field3   [f03      ]
  6. }
  7. END
  8. END
  9. ATTRIBUTES
  10. BUTTONEDIT f01 = formonly.field1, ACTION=detail, NOTEDITABLE;
  11. BUTTONEDIT f02 = formonly.field2, ACTION=detail, NOTEDITABLE;
  12. BUTTONEDIT f03 = formonly.field3, ACTION=detail, NOTEDITABLE;


A more complex technique if you are using GBC and/or Universal Rendering would be to explore some customisation that uses the onClick Javascript event (or onDblClick or onMouseOver etc) for the field/widget that sends the action back.  However you would not want to get in the way of the existing events that move focus to the field in an INPUT etc)

What you also have to note is that a MENU has no concept of current field.  So note in the above examples, the MENU example using a BUTTON has a different action for each field, whilst the INPUT example is able to use a single ON ACTION and FGL_DIALOG_GETFIELDNAME() to determine what the 4gl field focus is.  I am also conscious that none of those techniques allow you to share a form between an input view and a readonly view.

Reuben














Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Lu?s T.
Posts: 39


« Reply #2 on: September 10, 2019, 07:15:38 pm »

Thanks a lot Reuben. Very useful information.

As I am using a DIALOG, which doesn't not allow a MENU as a sub-dialog, I opt to do a DISPLAY with buttons in place of the fields. Something like:

Code:
DISPLAY BY NAME ...
DIALOG
    SUBDIALOG ...
    ON ACTION field_click_action
       ...
END DIALOG

The way I find to share the same form for DISPLAY and INPUT was to replace dinamically the form fields by buttons. Perhaps not very supported but I isolated that in a function.

I have one more questions for you (or whoever have a solution). How to make a display array react when I click a row (like a weblink)? I already figure out how to do it using double click but I rather prefer a single click. More consistent with web interfaces.

To illustrate the idea thing about a client FORM, where I have a detail with his contracts. I would like the user to click in a row and open the contract FORM.

I suppose this should be easier than my first question.

Thanks in advance

Luis
 
Reuben B.
Four Js
Posts: 1119


« Reply #3 on: September 11, 2019, 01:15:09 am »

Quote
How to make a display array react when I click a row (like a weblink)? I already figure out how to do it using double click but I rather prefer a single click. More consistent with web interfaces.

Have a look at the rowActionTrigger presentation style http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/r_fgl_presentation_styles_table_style_attributes.html

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Lu?s T.
Posts: 39


« Reply #4 on: September 12, 2019, 04:00:47 pm »

Once more thanks Reuben.

I read the documentation and tried to put that working without success. I can change the test color but not the click behaviour. I suppose I am missing sometthing. Here is the code:

Main 4gl
Code:
define paXYZ    dynamic array of record a, b string end record

main
    CALL ui.Interface.loadStyles("testSingleClick")

    let paXYZ[1].a = "FirstA"
    let paXYZ[1].b = "FirstB"
    let paXYZ[2].a = "FirstA"
    let paXYZ[2].b = "FirstB"
    let paXYZ[3].a = "FirstA"
    let paXYZ[3].b = "FirstB"

    open window wMain with form "testSingleClick" attributes (style = "WebPage")

    display array paXYZ to saXYZ.*
    end display

end main

Per file
Code:
layout
grid
{
<T xyz                 >
[fld1     |fld2        ]
[fld1     |fld2        ]
[fld1     |fld2        ]
[fld1     |fld2        ]
[fld1     |fld2        ]
<                      >
}
end
end

attributes
    table xyz : table_xyz, style="link";

    edit    fld1    = formonly.a;
    edit    fld2    = formonly.b;

instructions
    screen record saXYZ (formonly.a,formonly.b);

And 4st file
Code:
<StyleList>
    <Style name="Table.link">
        <StyleAttribute name="rowActionTrigger" value="singleClick" />
        <StyleAttribute name="textColor" value="red"/>
    </Style>
</StyleList>

Do you see anything wrong or missing? I am testing with the GDC in Universal Rending Mode.

Reuben B.
Four Js
Posts: 1119


« Reply #5 on: September 12, 2019, 11:32:56 pm »

Your code worked for me.  You did npt have anything to indicate success (apart from the array exiting), so perhaps you just need to add ...

Code
  1. after display
  2.            call fgl_winmessage("Info", SFMT("Row selected is %1", arr_curr()), "info")

Reuben

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Lu?s T.
Posts: 39


« Reply #6 on: September 16, 2019, 10:13:35 am »

The success was array exiting and, consequently, program end. In any case I add the after display clause and confirm that it only leaves with double click.

I am using Genero Desktop Client Version 3.20.08 build-201907311127, enabling Universal Rendering as the default rendering.
In terms of compiler, I have fglcomp 3.20.05 rev-3e07ac75, Target a640710.

Do you think I should open an ticket?

Reuben B.
Four Js
Posts: 1119


« Reply #7 on: September 17, 2019, 12:03:47 am »

The success was array exiting and, consequently, program end. In any case I add the after display clause and confirm that it only leaves with double click.

I am using Genero Desktop Client Version 3.20.08 build-201907311127, enabling Universal Rendering as the default rendering.
In terms of compiler, I have fglcomp 3.20.05 rev-3e07ac75, Target a640710.

Do you think I should open an ticket?


Please don't hesitate to open a ticket.  What you may want to experiment is running GDC native, that might tell you if issue lies with UR.  I don't think I have accidentally corrected anything in copying your code, the textColor=Red should tell you if it is picking up the right .4st, as would investigating the AUI Tree.  The other thing that I might speculate on is the PC touch enabled? / does the Table appear as listView by default, or perhaps are you misinterpreting that one click is initially required to set Windows focus to the GDC window (to see if this is the case make the first click outside the table, and then do your single click inside the table)

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Lu?s T.
Posts: 39


« Reply #8 on: September 17, 2019, 06:12:42 pm »

Hi Reuben,

I uninstalled and reinstalled the GDC and it works now. Probably something went wrong with the previous installation.
Thanks for your help

Luis
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines