Go to Page of Fixed Cell Repeating Group

[mccjon]

Hi Bubblers,

I’m so close with this but am clearly missing a step. I’ve got a Fixed Number of Cells RG which displays content, with a User only able to see one piece of content at a time. They can move the RG forward and back using buttons - this all works well. But if I want a User to be able to share the current Content with someone else, I need to be able to load in the current Page/cell number of the RG as a reference into the URL, and then ‘Go to Page’ inside Element Actions -> RG Actions.

I tried using the Index as a reference, but every cell showed an Index of 1 for some reason?

I’ve watched @romanmg’s great video here https://www.youtube.com/watch?v=FMkNV8_1tSk but I can’t see how the User RG was labelled. Gaby, do you perhaps know how I can ‘get’ the page number that is currently being shown to the User? How do you assign page numbers to RG cells?

Any help will be greatly appreciated!

[fayewatson]

Hi @mccjon You can do this by storing a custom state (of type: number) on the page, which “remembers” which page the Current User is viewing.
Here is a similar example to Gaby’s:
Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

In this example, there is a custom state called “page” (type: number, list: no) on the page itself (Note: This custom state could instead be set on your repeating group, as it is in Gaby’s video, either way works!)

This example has pages of job entries; the “page” custom sate default value is 1 since the Current User is shown the first page of the RG when the page is initially loaded.

When either of the forward or back buttons are clicked, that “page” custom state value changes to reflect the page that the Current User is viewing.

If forward is clicked, the Current User is scrolled to the top of the page, 1 is added to the “page” custom state value, and the repeating group shows the next page of Jobs in the repeating group:

If back is clicked, the User is scrolled to the top of the page, 1 is subtracted from the “page” custom state value, and the repeating group shows the previous page of Jobs in the repeating group:

In order to share the current page in the URL with another User, it would be best to incorporate page parameters. How is your link share button setup, or do you need the current page to be in the URL at all times?

[mente12]

Hi,

One way to do this…

You could use a state WhereAmI = WhereAmI + 1 (consider wraparound or not in your conditional logic on the 12th on the example below) to know the Repeating group’s “page” you are currently at, at any given moment.

Pass the value “WhereAmI” to your shared page.

Additionally: Even though the repeating group only shows for example 3 records at a time, the repeating group COUNT contains the number of total number of records found or returned. Lets say for example 12 total record showing 3 at a time. You an use this value to know if you have wrapped around to reset your counter “WhereAmI”.

Does this help?

Rick
Developer
Also available for instructions
(info in profile)

[mccjon]

Hi Faye,

Thanks so much for your incredibly detailed and fast reply!

Your logic makes sense :), the only thing is that the RG only shows Content that the Current User has not already seen, so the ordering of the pages will be different for each person. So I was hoping to pass the current Content’s Unique ID or something similar to that, so that when a person receives a link, they are taken directly to the correct piece of content, as long as they haven’t seen it already.

Currently, for sharing, I’ve used the toolbox to run the below piece of Java to invoke the Native sharing console - I need to be able to include a reference to the current piece of Content in the URL - right? When the page loads, if the URL parameter is not empty, I would like the User to be taken to that piece of Content (the parameter type is number and it looks like the ‘Go to page’ is also only a number).

There must be a way to do this, though, right?

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
}); // share the URL of MDN

[fayewatson]

No problem at all, @mccjon!

@mccjon

Your logic makes sense :), the only thing is that the RG only shows Content that the Current User has not already seen, so the ordering of the pages will be different for each person. So I was hoping to pass the current Content’s Unique ID or something similar to that, so that when a person receives a link, they are taken directly to the correct piece of content, as long as they haven’t seen it already.

Ah! Got it! Yes definitely possible with page parameters! Just one quick question – if a User clicks to view that shared URL, do you need that content to be considered “Page 1”, and then the User can click “next” to see their other Content Things?

[mccjon]

Hi Faye,

Thanks so much for your replies!

Ideally, yes, I think that’s how I’d like it to work.

How else do you see it potentially working? I’m open to other ways of getting it done.

[fayewatson]

Hi @mccjon Sorry for the delay! I just wanted to double-check this with you first (and let me know if it won’t work with your setup of course!), but it may be easier to not use a repeating group, and set the page’s type of content to Content.

This way, the unique ID of each thing is already in the URL, and clicking the ‘next’ or ‘back’ button would show the next unseen Content for each User (by using the Go to Page --> Page: Content --> Data to send: [Next unseen Content Thing which should be displayed]. Though it’s a go to page action, it wouldn’t refresh the page since the Current User would be staying on the same page (only the Content being displayed would change). Happy to provide an example if you think this would work with your setup!

[mccjon]

Thanks again, Faye, and no worries at all!

Hmmm, that could work! The main benefit is that the unique ID is in the URL, right? So sharing would be much easier. For the ‘data to send’ - would this be a ‘Search for Unseen Content:first item’ - could this slow down the app a lot compared to ‘Show next of RG’?

And I also wouldn’t need to make new pages, just refer them back to the same page and update the data to send to the new unseen content?

Was there any way you could see it working with an RG and parameters? It felt like there was potential with that method; if not, I’ll give this a go!

Thanks so much again for all of your time and help!

[fayewatson]

@mccjon

Hmmm, that could work! The main benefit is that the unique ID is in the URL, right?

Right! Setting the page’s type of content also allows you to use “Current Page Thing” for SEO purposes, whereas you can’t do this with just page parameters:

@mccjon

So sharing would be much easier. For the ‘data to send’ - would this be a ‘Search for Unseen Content:first item’ - could this slow down the app a lot compared to ‘Show next of RG’?

I’m not 100% sure if that search would run every time next or previous is clicked, since the page is not fully reloading. Just incase it does, you could still use a 1 cell by 1 cell repeating group on the page instead. Then, use the custom state to show the next or previous RG cell in the data to send action. Here is an example

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

In this example the page’s type of content is Event and one Event is displayed at a time:

(Here the RG is visible, but if you’d rather not have this visible to the User, you can remove the elements and set it to be 1px by 1px in order to just use its data source in the workflow actions)

If the page is loaded without any data (i.e., the User somehow navigated to this page and there isn’t an Event’s unique ID in the URL) the page will automatically set the first item in the Repeating Group of Events as the Event to be displayed, using this Go to Page action:

(Checking “Replace the Entry in the Browser History” makes sure that if the Current User clicks “Back” in their browser, that they are taken to the page they were on before this page. Otherwise, clicking ‘back’ will navigate them to this page without any data to display).

If the Current User then clicks the “Next” button clicked, the workflow’s first action adds 1 to the “page” custom state:

(Here my custom state is on the Group Event element):

And then the Go to Page’s “Data to Send” uses that “page” custom state value to ‘grab’ the correct ‘next item’ from the Repeating Group of Events. The expression is Repeating Group Events’ List of Events: item #[Group Event’s page custom state value that was updated in Step 1]:

For example if the Current User was viewing the second Event, and clicked “Next”, the custom state value would become 3.

If the Current User clicks the “Previous” button, then 1 needs to be subtracted from the custom state value first:

For example, if the Current User was viewing the second Event, and clicked “Back” the custom state value would become 1.

And that custom state is used again to ‘grab’ the correct ‘previous item’ from the Repeating Group of Events. The expression is the same – Repeating Group Events’ List of Events: item # [Group Event’s page custom state value that was updated in Step 1]:

To ensure the Current User doesn’t click the Previous button when they are already viewing the first item in the list, the Previous button has this conditional to make it not clickable when the “page” custom state value is 1:

Similarly, when the Current User is viewing the ‘last’ item in the RG, the “Next” button has this conditional to make it not clickable when the “page” custom state value is equal to the total number of items in the RG:

(For example, if there are 4 total Events, and the Current User is viewing the 4th Event, the Next button can’t be clicked)

Last but not least! If you allow Users to click on a specific Event from an RG (if the RG is visible), when that cell is clicked, you would want to first update the custom state value to be the Current cell’s Index:

And the Go to Page’s “Data to Send” would be the Current cell’s Event (or Unseen Content):

That should work! But please let me know if not, or if you have any other questions!