Disable a Widget with via UI-Action

  • tedersm
        3 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,
        Markus

        Chris Bouveret
            Has successfully completed the online course Introduction
            Has 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 Certification
            Has successfully completed the Advanced Certification
          3 weeks 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 Introduction
              Has 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
            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 Introduction
                Has 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 Certification
                Has successfully completed the Advanced Certification
              3 weeks 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 weeks ago by Chris Bouveret.
              Attachments:
              You must be logged in to view attached files.
              tedersm
                  2 weeks 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 Introduction
                      Has 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
                    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 Introduction
                        Has 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
                      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 weeks 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

                        Viewing 8 posts - 1 through 8 (of 8 total)

                        You must be logged in to reply to this topic.