Button Configurations

Here, you need to create a new button which will display the textFields, once you have data in this particular field, start displaying the next button which will store these detail in database. 

Note: Use Show when condition for 2 different buttons .

Why do you want to populate a textfield on click of Submit or Cancel buttons.

The better UI/UX approach for your use case is to give user a checkbox field in the form to accept or reject the request and side by side show a mandatory text/paragraph field for the comments that user have to add. Then on Submit save those values in the DB using WDSE node in process model.

Try in the button Widget keep the submit as false for initial submit and make true for secondary submit so that you can achieve this.

And in same way implement for cancel as well

I agree with you, It's a good practice to use radio buttons to achieve my user story. I realized lately.. I applied the same approach on the previous day.  By applying showWhen  to my textfields (true / false ).. When I click on Approve a textfield which is true  will appear to fill it up, similarly for the Reject a textfield (false). 

Hi JayaPrakash, I really appreciate your approach.. My first idea is to implement like yours.. When I click on  submit Textfield is not populated  my form was submitted and then action is completed. Later, I realized to go with the radio buttons, it is one of the possible way to solve my approach.

I'm not familiar and not aware with initial Submit and secondary submit. Could you please explain how it works.. and can you share the code for the reference.. it really helps everyone who wants to solve this kind of approaches in future.

Maddikara Chandrasekhar Reddy said:

can you share the code for the reference

The buttonWidget() component has a parameter called "submit", which accepts a boolean value (true or false).  If it's set to false, the form/task will not submit upon click of the button, while any saves in its saveInto parameter will execute.

Hi Chandrasekhar Reddy,

try the below code So, you will know how the submit parameter works in buttonwidget()

a!localVariables(
  local!map: a!map(name: "", email: "", comment: ""),
  local!submit: false(),
  local!showWhen: true(),
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!textField(
              label: "Name",
              value: local!map.name,
              saveInto: local!map.name
            ),
            a!textField(
              label: "Email",
              value: local!map.email,
              saveInto: local!map.email
            )
          },
          showWhen: local!showWhen
        ),
        a!columnLayout(
          contents: {
            a!paragraphField(
              label: "Comments",
              value: local!map.comment,
              saveInto: local!map.comment
            )
          },
          showWhen: not(local!showWhen)
        ),
        a!columnLayout()
      }
    ),
    a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: if(local!submit, "Approve", "Submit"),
          saveInto: {
            a!save(local!showWhen, false()),
            a!save(local!submit, true())
          },
          submit: local!submit,
          style: "PRIMARY"
        ),
        
      },
      secondaryButtons: {
        a!buttonWidget(
          label: if(local!submit, "Reject", "cancel"),
          saveInto: {
            a!save(local!showWhen, false()),
            a!save(local!submit, true())
          },
          submit: local!submit,
          style: "SECONDARY"
        )
      }
    )
  }
)