Forum Academy Marketplace Showcase Pricing Features

[Solved] Any way to create Workflow when input in a RG is selected / focused

I’m looking to trigger a workflow whenever an input within a repeating group is selected, but the input within the RG field isn’t available from the “Do When” workflow.

Is this by design?

Starting to look at workarounds now. Open to ideas if you have them.

Thanks!

I haven’t used this approach before so there may be a better alternative, but I think one way to do this would be to place an invisible button over the input, which sets the focus on the input when clicked, and then triggers the workflow. In this example, the invisible button has a blue border but that can be removed so it’s completely transparent.

Editor:

1 Like

Brilliant Idea @fayewatson!

This solves half the problem, but still leaves 1 big and 1 small challenge:

  • 1 big - Users often click tab to go to the next input and this doesn’t work in that scenario.
  • 1 small - Users have to click tab 2x to go to the next input since the 1st click takes them to the button on top of the input.

Any ideas for solutions to these?

Ah, gotcha! Hmm… I’m not too sure! I will definitely keep trying a few things. Does the workflow need to occur every time an input in the RG is focused, or just the first time?

I’m trying (emphasis on the word trying, lol) to create a series of inputs so that user’s can input between 1 and 15 answer choices. Ideally, when a user selects the first input box a second one will appear. When the select the 2nd input a 3rd one will appear, etc.

Additionally, there will be an “x” to the right of each input so that users can delete that input, in which case the ones below it will shift up 1 row.

I’ll also need to figure out how to add this data to our database. I assume I’ll need to do a “when input value is changed” then save that input to our database. Will need to figure out how to delete ones that need to be deleted too then, etc.

Ok so I think this is close! (I hope! lol) In this example, an input appears, and the User types their answer and hits enter to save that answer. Once an answer is saved, they can immediately enter the next answer - no extra clicking needed. For this to work, I had to enable auto-binding so the User can adjust the previously saved answers. If they need to delete an answer, the black X will delete the answer - remove it from their list of saved answers, and shift the cells up.

*If you need an additional workflow to occur every time the input is focused, I created an invisible button which becomes visible when the input is focused. Since the input which creates the new entries is not within the repeating group (though it looks like it is), we can access the ‘Do When’ statement this way.

Preview:

Editor:

1 Like

Impressive problem solving @fayewatson! This is a really smart implementation.

We’re very close. I’m going to play around with it to see if I can get it set-up so that tabbing will go to the next input box in each scenario. Will keep you posted.

So, there are 3 specific challengesI’m trying to get past. Think I found a solution for the 2nd one, but it’s a bit hacky.

  1. Tabbing from end of RG to 1st non-RG Input - for some reason it takes a number of tabs (3 or 4) to go from one to the next. Ideally, this takes just 1 tab (or 2 if the 1st one goes to the x, as tab does between other RG).
  2. Tabbing from 1st non-RG input to the next RG Input - Technically, it’s the same input although it appears to the user as if it’s a different input. One solution that works is to include additional input fields directly below the first field. Then tabbing goes from the 1st one to the 2nd, etc. Would require me to set up lots of conditional logic to hide the top inputs so far from ideal. May be viable. Definitely prefer a cleaner solution if possible. Anyone know a way to have “tab” take a user to the same input field as it started in?
  3. Clicking on the 1st non-RG input doesn’t keep that field focused from a user POV. – So, need a way to set focus for this element. I believe we’re changing which element it is (even though it seems like it’s the same one to the user) and that’s why it’s losing focus. Need to dig in a bit more here as well.

Let me know if you have solutions for any of these.

Thanks Scott! Good call about the tabs - I’m not sure why it takes four or five to tab to the next from the RG to the regular input, but I think it has to do with the input being in a repeating group and perhaps Bubble not knowing which ‘next’ input to set the focus to. I created a second option below which seems to work in regards to entering information into the input, hitting tab, and then setting the focus to that same input. I’m not sure if it’s possible to tab from input to input from cell to cell because I think the focus is set from input to button right, [next cell] input below to button right, [next cell] and repeats? Maybe if you were to conditionally show inputs (in one group) and have buttons (in a repeating group to the right, lined up with the inputs). Then, group the inputs and in the ‘delete’ button workflow within the repeating group, have the workflow delete the Input entry with the item # in the list being the cell index of that button? Not 100% sure if that would work, but may be worth a try!

@fayewatson, we’re so close.

I created a new page within the Forum App and made a few updates to extend the 2nd version you created. Specifically:

  • I set it up to show the next input after a user types something in the 2b (as opposed to on focus).
  • I got rid of the custom state “Focus” and added a 25ms delay in the workflow which seems to have fixed the problem with 2b not being focused sometimes.

Looks like you already go most everything else working! The only thing left seems to be getting tab to take a user from the last option in the RG to the first input below it. I’ve played around with various grouping options and none of them seem to work. I think a RG makes the most sense since I can see us extending this capability beyond 15 inputs so I asked emmanuel if he’d be able to extend the input sequence to ignore RG’s and instead just use regular groups to faciliate ordering. Seems like others will run into the same issue and I can’t imagine precluding people from using RG’s within forms is the ideal functionality, so perhaps he’ll be able to make a quick fix.

Of course, if you have other ideas on how to solve this, I’m all ears. Been very impressed so far! Thanks again!

I’m not sure if this helps but I thought of a different approach which puts the new entry input inside of a collapsible group that is within only the last cell of the repeating group (the visibility statement is 'When current cell’s index is repeating group’s: count").

Editor:

This almost fixed the tabbing from the repeating group to the outside group (since now everything is in the rg) but for some reason the new entry input is first to be focused in the last cell, instead of the input entry submission above it which shares the cell. I’m not sure why this is, but if you can solve this and refocusing the new entry input - then that would do it!

I also noticed that if I don’t assign a workflow to the X icon, then the inputs are focused from input to input on tab (downwards), instead of input to icon to input to icon. As a workaround, you can place an identical X icon (hidden on page load), with the delete workflow, over the button that is visible on page load, and have the workflow icon only be visible when the User hovers over the icon without the workflow.

I also needed to create a workaround for when the User’s list of entries count is 0 (since having no entries in the repeating group would not display the create new entry inputs). To do this, I created a conditional statement which changes the data source of the rg to do a search for one ‘admin’ input entry. This allows the User to create an entry within the repeating group when their List field is empty.

I’m not sure if this gets us any closer, since I can’t figure out the refocusing, but just wanted to share incase it may help a little bit. :slight_smile:

I think the challenge with tabbing within this one is related to the fact that clicking tab goes to the next item in the same group on the right, and if none on the right then it goes to the next row. So, having groups within a RG creates complications, as does going from a RG to outside of that RG. There may be a solution, but I don’t know what it is.

I’m almost there on the 2nd one. Just left with clicking tab from the last item in the RG going to the 1st input below it. Wonder if there’s a way to have clicking tab go to an insible element (let’s call it E1) in the last RG cell and having another element (E2) conditionally shown when E1 is focused, and then having a workflow run when E2 is visible.

Doesn’t seem to work because I can’t get many actions to trigger within the RG. Any other ways to have the last tab go to an element that enables us to run a workflow to move the focus to the input below the RG?

Added a condition to the 2nd verison which narrows the scope of the last problem.

Now, when the last input in the RG is changed, it’ll automatically set the focus to the 1st input below the RG. As such, the only scenario where we still have a problem is when the user tabs through the last input in the RG (and doesn’t change it’s value) and then clicks tab again.

Do you know what’s being focused after the last tab in the RG? …I can’t figure it out.

Press the spacebar to “click” the browser item that has the focus.

Would it be simpler with a workflow action on change of input? Can check if it’s not empty and add a new item at that time.

1 Like

In my browser, after tabbing through the last entry of the RG, the focus is set to the URL, and then on the second tab - it goes to the input outside of the RG. I just tried using a Hidden Input where its initial content changes when it is focused - and then the workflow (when hidden input is changed) sets the focus to the outside input. But, changing the initial content doesn’t count as the input value changing to start the workflow.

Thanks @mishav! Figured out what’s being selected after the last RG – it’s the lock icon in the Chome browser (to the left of the URL).

The next click goes to the URL.

And the click after that goes to the input.

How about this for a simplification …

1 Like

@fayewatson, I’m having similar challenges. Just tried creating inputs everywhere on the screen. Above the group, below the group, to the left, to the right, inside the RG, inside the parent group, etc. Still, hitting tab at the last RG goes to the browser.

How’d you get it to go from the RG to the input after it?

A group around the RG and the additional input.

Editor: https://bubble.io/page?type=page&name=rg-tab-order&id=forumapp3&tab=tabs-1