[tedersm]

2 months ago #54184

Hello,

I´m trying to add a simple logic via an UI Action, let me explain:
As soon as I have selected a checkbox, I want a “DatePicker” widget to be disabled (i.e. not enabled).
Unfortunately, the widget is enabled when the enabled property is activated in conjunction with a UI action.
Is there a way to negate a property (like the enabled property) within a UI action or another way to achieve my desired logic?

Thank You & Best Regards,
Markus

[Chris Bouveret Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)Has successfully completed the online course Advanced (320)Has successfully completed the Intermediate CertificationHas successfully completed the Advanced Certification]

2 months ago #54189

Up

1

Down

::

an even easier way to achieve the same result without Code and Variable is the following:

• Create a Story e.g. “Enable DatePicker by Checkbox”
• Subscribe to the select Event of your Checkbox
• Add a UI Action and map the “selected” property of your Checkbox to the “enabled” property of your DatePicker (see attached screenshots)

Best Regards and keep simplifying 🙂

Attachments:

You must be logged in to view attached files.

[Sarah Werner Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)]

2 months ago #54226

Up

1

Down

::

Hi Tedersm,

 

you can achieve this as follows:

 

1. Create a global variable (e.g. “bCheckboxSelected” of type Boolean) and map it to the “selected” property of the Checkbox

 

2. Subscribe to the “Select” Event of the Checkbox (simply drag and drop the widget to a opened story of your Process Designer)

 

3. Add a condition shape and check if the “bCheckboxSelected” variable is true (or false, as you wish)

 

4. Connect one UI Action to the green output node (condition = true) and one UI Action to the red output node (condition = false) of the condition shape. Within these UI Actions you can respectively map the constant value “true” or “false” to the “enabled” property of your DatePicker widget in that way that you want the DatePicker to behave.

 

See screenshot for an example.

Please let me know if you have any further questions.

 

Kind Regards
Sarah

Attachments:

You must be logged in to view attached files.

[Chris Bouveret Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)Has successfully completed the online course Advanced (320)Has successfully completed the Intermediate CertificationHas successfully completed the Advanced Certification]

2 months ago #54186

Up

0

Down

::

I understand that you want to toggle the Datepicker based on a checkbox. To create this logic follow these steps:

• Add a Checkbox and a Datepicker to your Screen, in this example “Screen1”
• Create a variable called “checkboxState” of type boolean in Data Workbench
• Create a Story e.g. “Enable DatePicker by Checkbox”
• Subscribe to the select Event of your Checkbox
• Add a Script with

  // Get the current state of the checkBox
  var checkboxState = sap.ui.getCore().byId("Screen1--CheckBox").mProperties.selected;
  // Set current state as variable
  this.getGlobals().setVar("checkboxState", checkboxState);

• Add a UI Action and map the variable “checkboxState” to the “enabled” property of your DatePicker
• Deploy Your App and see the result 🙂

Hi, please also see the attached Screenshot.  Hope this helps

Best Regards
Chris

• This reply was modified 2 months ago by Chris Bouveret.

Attachments:

You must be logged in to view attached files.

[tedersm]

2 months ago #54218

Up

0

Down

::

Hi Chris,

thanks for you Messages & your Help!

The Solution with the UI-Action is working, but how is the following possible:
If the Checkbox is selected,the date picker should be disabled (not enabled).
With your suggested Solution, the DatePicker is only enabled when i select the checkbox, so i want to negate the enabled property.

[Sarah Werner Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)]

2 months ago #54229

Up

0

Down

::

Another way to achieve this behaviour (without using shapes in the Process Designer) would be to add an Expression Binding to the “enabled” property of your DatePicker widget within the App Designer.

 

The expression would look like this:
{= ${variableHolder>/bCheckBoxSelected} ? false : true}

 

For further information for Expression Bindings with SAP UI5, please have a look at the SAP UI5 documentation.

[Sarah Werner Has successfully completed the online course IntroductionHas successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)]

2 months ago #54230

Up

0

Down

::

One last hint for the sake of completeness:

 

In case you don’t need the information about the “selected” state of your Checkbox in your further process any more, there won’t be a need to create a global variable but just use the widget property itself in the condition shape (see screenshot).

 

To learn more, please also have a look at our online courses.

Attachments:

You must be logged in to view attached files.

[tedersm]

2 months ago #54237

Up

0

Down

::

Hi Sarah,
Thank you very much! Your answers have helped me a lot and my understanding is now even clearer.
The Adding of a simple condition was not in my mind.

Thank you & best regards
Markus  Teders