How to access properties of UI Elements in View Controller?

[Former Member]

Hi,

Suppose I have 2 input fields on MainView. I want the second input field to be disabled untill user fills the first field? How do I have make read only property of the 2nd field false at run time (  In controller )? Is there a way to change properties of UI elements through view controller?

Thanks in advance.

[Sharathmg · Accepted solution]

Any change in behavior of the fields can be performed by triggering an event.

Now, from 7.3 version, input fields have onChange event. So, when user types some data in the field, this event is triggered. Link an action to this event which will set the attribute handling the enable property of field.

Regards,

Sharath

[Former Member · Accepted solution]

Thanks Sharath. But in OnChange function, how do I access the UI element (input field)?

[Sharathmg · Accepted solution]

1. Create a context attribute of type boolean.

2. Assign this attribute in the second ui elements - properties -> enabled.

3. in the init method set the value of attribute to false.

4. in the onChange event, set the value to true.

Regards,

Sharath

[ErvinSzolke · Accepted solution]

Hello Rahul,

It is not really possible to do checks on the content of an InputField while you are typing.

The onChange() is not really for this. It is invoked if the focus is changing, not the content.

What is slightly better for your approach is the onEnter(). But there you always have to press Enter key once you typed something, and then this event gets triggered so then you can do your code.

If you wanted to have a continuous check on the contents of the InputField then you should have some kind of repetitive task that is doing this. One option would be TimedTrigger (unless it was not re-rendering the entire page -- and so it would not wipe out the data from your inputfield, etc).

Perhaps using some javascript inside the page the key events could be captured (I assume this could be done with WebWidget UI element, I will check this soon -- no idea how to capture key events in any other way).

To implement the solution (with the downside of always pressing Enter to get validation on the content of the inputfield) do this example:

1. have 3 context attributes

   - text1 (string -- for the value property of inputfield1)

   - text2 (string -- for the value property of inputfield2)

   - enabdisab (boolean -- for the enabled property of inputfield2)

2. bind these context attributes to the UI elements' property value as I wrote above in the brackets in point 1.

3. put into wdDoInit() so the inputfield2 gets disabled when you start up the application

public void wdDoInit()

  {

//@@begin wdDoInit()

   wdContext.currentContextElement().setEnabdisab(false);

//@@end

  }

4. now create an event for the onEnter() event of inputfield1, and add this code (I called the event "ChangeIt"):

  public void onActionChangeIt(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionChangeIt(ServerEvent)

   if (wdContext.currentContextElement().getText1() == null) {

    wdComponentAPI.getMessageManager().reportWarning("not yet filled");

    wdContext.currentContextElement().setEnabdisab(false);

   }

   else { 

     wdComponentAPI.getMessageManager().reportSuccess("has content");

     wdContext.currentContextElement().setEnabdisab(true);

   }

    //@@end

  }

This will work this way in runtime:

1- after invocation you see this:

2- if you press key Enter now once focusing inputfield1:

3- if you add some text and press Enter again then inputField2 gets enabled:

Problem is that once the first field is empty but no enter pressed yet, then still the second inputfield is enabled.

4- If you delete the text, press enter again, the inputfield2 gets disabled

Still I hope this helps.

Regards,

Ervin

[ErvinSzolke · Accepted solution]

as I can see even only certain keys are allowed using WDHotKey, i.e. if the user presses an alphabetical character or a number (i.e. when entering a value for the inputfield) then no event can be triggered : http://help.sap.com/saphelp_nwpi711/helpdata/en/45/2d250cfc9457c0e10000000a1553f7/content.htm?frames...

[ErvinSzolke · Accepted solution]

and as I can see here events triggered on server side for client side events like onkeydown is not supported  e.g.

https://scn.sap.com/thread/192325

[Former Member · Accepted solution]

Hi Ervin. Thanks for the help.  As you said, if we insert the java script, then there is a funciton, onKeyPress which can be used I guess. Also, can we use jQuery with a WebWidget UI element ?

[ErvinSzolke · Accepted solution]

Hi,

even if you could catch keypress events with WebWidget (javascript), it is problematic to get the ID of the InputField's UI element, and even if you can make it work to catch that event, I don't know how you could then invoke server side events like the ChangeIt() event in the above example.

If you add a WebWidget UI element, and then bind a string context attribute (e.g. let's call it "jscript" in this example) to its "html" property then you can add a code to the wdDoInit() like this:

String jsc = "<html>" +
              "<head>" +
               "<script> " +
                "var myinput = document.getElementById(\"KDDL.New1CompView.InputField\");" +
                "myinput.onkeypress= function() {" +
                "alert(\"key pressed\"); }" +
               "</script>" +
              "</head>" +
              "<body>" +
              "</body>" +
             "</html>";
wdContext.currentContextElement().setJscript(jsc);

This pops up an altert window any time you press a button on your keyboard when focusing the 1st inputfield, but there are some problems with this.

One is that you have to check the ID of the input field in some http trace tool (this ID was KDDL in my case as you see in the above code BUT this will be different on your end and afaik this ID might even change if you undeploy/redeploy your app again) and as mentioned I am not sure there is any way to proceed from here, i.e. invoke any event like the ChangeIt() event, since that is on server side, and javascript is client side coding.

What you could theoretically do is that you do the entire check and the enabling/disabling of input elements using javascript but this would mean a really painful coding, not to mention the generated html input IDs I pointed out above and which makes all this pretty fragile and error prone.

So all in all I don't recommend to play around with this, rather try to live with the restrictions of webdynpro (it is simply not meant to be used in the way you intend to use). If this project was mine I would rather implement the application in "webdynpro-way" i.e. all the inputfields are enabled and if the customer enters something into the second inputfield (which meant to be filled only when the first is filled) then at submitting the changes (and that triggers a roundtrip) you do the validation and you show an error message that filling the second field expects the first field to be filled as prerequisite.

Or you hide/disable the secondary inputfields and once the form has been submitted you make them visible/editable.

Still I hope this was helpful.

Best Regards,

Ervin

[former_member197472]

You dont have to write codes in init() or anywhere in action event.

Best solution for the same is using Calculated attribute for 2nd field.

If you create attribute named as 'SecondReadonly' make it type boolean and 'Calulated'.

Now in getmethod of it write 'null/blank value check for 1st field' code.

--

Amey

[ErvinSzolke]

Hi Amey,

could you please elaborate your idea?

Rahul's request is to do the check on the inputfield while typing (i.e. without roundtrip).

Thank you and Best Regards,

Ervin

[former_member197472]

Ervin,

Question was: Suppose I have 2 input fields on MainView. I want the second input field to be disabled untill user fills the first field?

And as per SAP standards.. Fields should should change their behaviour after change in state(which is similar to ECC behaviour).

If we use calculated attribute for 2nd inputfield and user enters something in 1st inputfield .. then he has to trigger some event to run calulated method(may it be standard trigger like lose focus which can be obtained by clicking anywhere on screen, or enter key).

Thats why i suggested Calculated Attribute Concept.. which we are using in our current project and also it is good for better performance.

Thanks

Amey

[ErvinSzolke]

Hi Amey,

I think the key sentence is this:

"...then he has to trigger some event to run calulated method(may it be standard trigger like lose focus which can be obtained by clicking anywhere on screen, or enter key)."

The customer's requirment was not this.

He expected that this trigger takes place without losing the focus or without entering "enter" key but he expected that the check takes place when pressing any key on the keyboard.

For this part of the problem I wrote that this is not really possible in webdynpro java.

See my previous posts.

Regards,

Ervin

[former_member197472]

Agree Ervin,

But solution given by you itself needs enter key right? It can be handled by calculated attribute automatically.. why to write code for that.

--

Amey

[ErvinSzolke]

Hello Amey,

yes, I understand what you say, and perhaps there is a third and fourth solution to this, and I don't even say your idea isn't better but the requirement is to do this without the enter key (or using any other explicit action to validate the content of the inputfield).

Best Regards,

Ervin