-
tedersm3 weeks 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,
MarkusChris BouveretHas 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 Certification3 weeks ago #54189::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 WernerHas 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 weeks ago #54226::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
SarahAttachments:
You must be logged in to view attached files.Chris BouveretHas 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 Certification3 weeks ago #54186::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 weeks ago by Chris Bouveret.
Attachments:
You must be logged in to view attached files.tedersm2 weeks ago #54218::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 WernerHas 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 weeks ago #54229::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 WernerHas 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 weeks ago #54230::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.
You must be logged in to reply to this topic.