Split repeating group [best bubbler wanted]

Hi Bubble-community :slight_smile:

I am currently building a resume editor and am desperate. I have tried all possible ideas but none have worked. Can you help me with my following problem.

I have two repeating groups, “work experience” and “education”. Which is currently on the first page. If both do not fit on the first page, the repeating group “education” is moved to the second page. This is how it currently looks:

However, I would like the repeating group “education” to be split. All items that fit on the first page should be displayed there and the rest on the second page. This is how it should look in the end:

Do you have any idea how I can do this? Is there a plugin for this?

Thank you very much for your help so that I can sleep in peace again :joy:

@alexcooney5 PDFPotion use case

@padyx it’s a bit tricky but @alexcooney5 above is building something that might solve this for you ^

2 Likes

hi @georgecollier

Do you mean this plugin PDF Creator Plugin | Bubble?

I would like to generate the PDF afterwards. To do this, it must already be displayed correctly. It should be a “preview”, where the data is used directly from the database. If the user makes changes, they are displayed directly in the “preview” and a pdf does not have to be generated beforehand. This makes the website faster and a pdf is not saved for each user. I forgot to mention this in the post.

PDF creation can be a pain. Looking forward too seeing what PDFPotion can do :slight_smile:

If you want to display your preview on the page, you will not be able to get it done with one repeating group unless you inject an unruly amount of CSS and some javascript.
You will have to use two RGs. One on the top page and one on the bottom page.
Elements now expose their height values, and you can use them to determine whether elements will snap or fit in their parent (or a fixed height).
At a high level, you will need to evaluate whether the sum of the heights of the groups is greater than the height of the page. If it is, then you will move over the last cell of the first Education RG into the second Education RG (either using regex or list operators). Then you’ll have to re-check whether the elements now fit on the first page, and loop through the process until you’ve moved enough text away from the first page and the elements end up fitting.

You will not get this working with conditionals, because conditionals continuously re-evaluate and will end up in an infinite loop. You will have to use custom events and custom states. Take care with race conditions.
The above method also works in the situation where even just the Work Experience RG doesnt fit on the first page.

2 Likes

I have set up the following workflow:

  1. sets a custom state of the height of work experience RG and education RG
    Bildschirmfoto 2024-03-15 um 20.46.17
    Bildschirmfoto 2024-03-15 um 20.46.24
  2. displays items of education RG until 10
    Bildschirmfoto 2024-03-15 um 20.46.44
  3. sets a new custom state of the height of education RG
    Bildschirmfoto 2024-03-15 um 20.47.07
  4. displays items of education RG until 9
    Bildschirmfoto 2024-03-15 um 20.46.51
  5. sets a new custom state of the height of education RG
    Bildschirmfoto 2024-03-15 um 20.47.07
  6. displays items of education RG until 8
    Bildschirmfoto 2024-03-15 um 20.46.58
    etc. until training fits on the page

now the problem is that the custom state does not set the height of education correctly after you have limited the number of items of education

The height of the first set custom state of education is 296:

I display the items from education until 1:

after I set the custom state again, but the value is 296. the value should be 148:

I have already added a pause but it has not solved the problem.

do you know how i can fix the problem?

This topic was automatically closed after 70 days. New replies are no longer allowed.