Multiple submit buttons with different GoTo's

Wappler General
#1

On an SPA page I have several form buttons. Buttons 1 and 2 have different GoTo’s.

The problem is that the GoTo’s seem to trigger before the FORM’s on-success actions and therefore the newid (identity) is not processed. So I would like to move the GoTo’s from the Buttons themselves into the “on-success” dynamic event.

Can I do that and use a ternary operation based on the id of the clicked button?

image

Button 1. id=“btn_save_list”
browser1.goto('./report_live')

Button 2. id=“btn_save_cont”
browser1.goto('./report_AD_new?job_id='+ report_new_accident_damage.form_new_accident_damage_report.data.newid)

image

#2

Are the form buttons within the same form? I have never used Flows yet, but it seems to me this may be a good use case for it.

Use on click events on the buttons to run different flows? I don’t know, I’m just going by what I would try. :wink:

1 Like
#3

You should not add dynamic events to submit buttons. Submit buttons submit the form - that’s what they should only be used for.

You can use regular buttons and add flows to them. The actions in the flows are executed synchronously, so each of the steps in the flow will wait for the previous one to complete.

3 Likes
#4

Thanks @brad for the suggestion, and backed up by @Teodor. I too have not used flows yet, first time for everything :smile:

Teodor, I knew I probably shouldn’t add dynamic events to submit buttons but I couldn’t see a way round it.

Here goes, diving into Flows… any more tips before I spend a load of time on this?

#5

Good luck, Neil! I would be curious to hear how you make out. I have yet to venture into Flows.

#6

A button of type submit either submits the form action of the Form element it is in or if not in a form element submits the form action of an external form using the submit buttons “for” parameter.
Therefore avoid making the buttons type submit in a situation where you want to use a browser.goto event on click then the button must just be set to button.

My thinking is a little different.
Button 1 I assume is linked to server action 1
Button 2 I assume is linked to server action 2
Therefore use the onsucvess of the 2 different server actions to run differently rather than the onsuccess of the form itself.

#7

Whilst looking at buttons, can anyone tell me what “Action Toggle” is used for?

image

#8

If you have the relevant component installed, you will see options below the selected menu item. Eg if you have modals on the page you will be able to select one to toggle show/hide:

image

It works with modals and collapses. It doesn’t seem to work with dropdowns, and only partly with tabs (at least when I’ve tried). I don’t how you would use it for lists or buttons.

#9

Thanks @TomD, I now know more than I did :smile: I might have a play at some point, just not today. I couldn’t find any mention of this anywhere.

#10

Hey @brad, I was a bit baffled as to where to start at first. I then looked at George’s Introduction to App Connect Flow which was very clear, and comes close to what I actually want. Although I have not implemented a Flow yet, I am confident that in the morning with fresh eyes I will be able to crack this one off in a matter of minutes.

1 Like
#11

Morning @Teodor, I have been playing with Flows and I am starting to understand it now.

In this particular case where I am introducing a Flow to incorporate and control some actions, I want to be clear as to which actions I should put in the Flow and which actions I should leave where they are.

I have created two Flows, one for each button.
This was done primarily to separate out the two different GoTo’s.
The question is… should I put the “on-success” actions into each of the Flows, removing them from the FORM’s “on-success” Dynamic Event, OR should I leave them where they are?

If you say “it doesn’t matter” then could you give me a preference?

Leave in the FORM’s “on-success”?

image

Or put in the Flow along with the SUBMIT and the GoTo?

image

And as a side question…
Are the actions in the right order?

#12

The actions added in the onsuccess event will be executed asynchronously so if you need them to execute one after another (synchronously) use flows.

that depends on what you need. Just put them in the order you need them to execute.

1 Like
#13

HELP

@Teodor I have been trying to get this to work but I keep failing and I don’t know why. My problem is to do with the GoTo dynamic address

I have this in my Flow

<script is="dmx-flow" id="flow_btn_save_cont" type="text/dmx-flow">
{
  run: {
    action: "{{
	form_new_accident_damage_report.submit();
	sc_new_ad_principals_q.load({});
	sc_q_live_reports.load({});
	form_new_accident_damage_report.reset();
	browser1.goto('./report_AD_new?job_id='+ report_new_accident_damage.form_new_accident_damage_report.data.newid);
	notifies1.success('New Instruction Saved!')
	}}",
    name: "flow_btn_save_cont"
  }
}
</script>

But when I execute I get this where no “identity” shows after the “=” sign

image

Yet if I code the GoTo without the static part './report_AD_new?job_id='+

and have it like this

browser1.goto(form_new_accident_damage_report.data.sa_ad_job_ins.identity);

I get this

image

Where the “identity” shows correctly.

Can you test something similar in a Flow? Do you get an issue like me?

#14

I should also have mentioned that the Flow does create a new record in the database and also creates a new folder correctly. It doesn’t redirect to the required GoTo.

#15

It is better to use the flow actions instead of the run action. The methods you call in the run are not async, so the flow doesn’t wait for them to complete and can give some unexpected problems.

About the id, you giving in your code samples 2 different expressions:

browser1.goto('./report_AD_new?job_id='+ report_new_accident_damage.form_new_accident_damage_report.data.newid);

and

browser1.goto(form_new_accident_damage_report.data.sa_ad_job_ins.identity);

The second is missing the report_new_accident_damage part, that could be the problem that the first one doesn’t work.

#16

@patrick thanks for coming back to me. Sorry, but you have lost me when you say “flow actions instead of the run action”. I am new to Flow and cannot see what you mean by “Flow Action”.

I have tried all actions in one Run Action (as above).
I have tried all actions in separate Run Actions as per

image
image794×344 26.9 KB

But I can’t see Flow Action.

And with regard to the different expressions, I had simply tried every combination possible just in case I struck lucky :smile: but I didn’t :frowning_face:

EDIT
I haven’t provided anything in the Action Steps > Input > $param, not sure if I should have done.

#17

Can anybody help with this last comment? I am sure @patrick and the Team are a little busy at the moment but I am under pressure to do a presentation of this site tomorrow morning.

#18

The newid is coming from the server after the commit? I think the problem is that the server-connect did not finish before the goto method was called. As I already told you the run actions do not wait for the code to finish and so the data is not yet available in the 3rd step.

You should perhaps move the goto step out of the flow to the completed event of your server connect form.

#19

Hi @patrick, I agree that “the server-connect did not finish before the goto method was called” is the likely problem. My original post explains that I have two buttons that the user could press, both submit but they have different GoTo destinations.

Teodor suggested using Flow because “The actions in the flows are executed synchronously, so each of the steps in the flow will wait for the previous one to complete”, but this seems not to be the case. So I am confused.

I am just looking for some guidance on the best way to do this. Or should I scrap the idea and come up with an alternative? I just need a simple solution that works, and this process is at the request of the client.

This is my first foray into Flows and so it is a bit alien to me. And I am still unsure what you meant when you said “flow actions instead of the run action”. Cheers

#20

The run action is probably an exception, because it calls the component methods which are not async, so it doesn’t know when they are finished.

With the flow actions I mean the other available actions, like the Server Connect action under Data Sources, this one waits for the action to finish before going to the next step.

In your case it is probably best to remove the submit out of the flow and trigger the flow on the complete event of the form.

1 Like