Forum Academy Marketplace Showcase Pricing Features

Book reader app - forum app example included

Want to make a little app that functions something like Kindle Cloud Reader. Basically lets you flip through the pages of a book.

First thing I’d like to figure out is the data structure. I’m thinking that the data type would be Book and the fields for that data type would be Book Title (text) and Book Pages (text / this field is a list).

That seems right to me, but I feel that I must be missing something because how would I then go about calling on the Book Pages from the database in any kind of proper order?

1 Like

Data Type : Page

Field : Text (text)
Field : Page No (number)

Data Type : Book

Field : Title (text)
Field : Pages (page, list)

So you keep all the Pages for a book in a Book thing as a list, but with a type of Page (the data type you created).

Have a go in the forum app, and we can help more easily :slightly_smiling:

1 Like

So I built it out on one page in the forum app. https://bubble.io/page?type=page&name=read_book&id=forum_app&tab=tabs-1 (Updated Link)

I just focused on the pages for now…getting them to display in a repeating group. The top of the page is where we should be able to click forward and back through the pages, but no text is showing up. The bottom of the page is where you can create new pages.

Any feedback on how to accomplish this would be most appreciated.

Link to forum app wasn’t working. I’ve updated it. https://bubble.io/page?type=page&name=read_book&id=forum_app&tab=tabs-1

Aha, you needed to put the text on the page with the “text” element. Search just returns the thing, it doesn’t show it.

Page updated, see how you go and report back if you need more help :slightly_smiling:

1 Like

Thanks @NigelG …much appreciated. I always forget to put a text element inside the group.

Now I’m trying to get the page to redirect to another page once the repeating group list completes. I’ve created a custom event called “redirect when page list completes”, but it’s not working. The error is in the event, not the action.

I’ve added it to the forum app here… https://bubble.io/page?type=page&name=read_book&id=forum_app&tab=tabs-2

Need to have a think about this one.

I think putting a condition on the next button might do it.

Do you want it to go to another Bubble Page when the page list is complete ?

Yes, I’d like it to go to the read-book-complete page when the page list is complete. Ideally the last page in the page list would already be visible and when the user goes to click the next button again the page would then redirect to read-book-complete.

I just tried putting a conditional on the next button. I think I have the “when” right, but there doesn’t seems to be a property state for page redirection.

I think you may need to define your own state for this.

I believe I created a custom state (maybe I’m getting the terminology wrong). What comes after the “when” is the custom state, correct?

I’ve applied it to the next button here under the conditional tab… https://bubble.io/page?type=page&name=read_book&id=forum_app&tab=tabs-1

The property to change options are mostly formatting related. Doesn’t seem to be a page redirect option.

A custom state is a little bit of temporary data that is attached to something on the page. Once you move on from a page - it is gone. And you can attach it to most things … so don’t lose it :slightly_smiling:

The “Conditional” tab on the Button is about how the button is displayed, not about actions. I am jumping ahead a little here, but imagine we have a page number field … when the page number is 1 then we disable the “Prev” button.

Which is exactly what I have done here…

pageno is a Custom State that I have added to the page. It is just a number that I am using.

On page load I set it to 1.

(you set the custom state when you do the action, you will see you can add a new one if you drop down the Set State action).

On page back and forward I + 1/ - 1 respectively.

And finally … how to do the redirect. I have duplicated the action for “Next”.

If this is the last page (page number = number of pages in the repeating group) then we do the redirect (otherwise we just show the next page and add 1 to pagno).

I have also put in a page counter at the top left for you, it helps in testing and looks nice :slightly_smiling:

Hope that helps.

1 Like

Looking to expand this little book reader app beyond just one book. Initially I was only focused on creating a list of pages and how to order and display those pages in a repeating group. Now I’d like to incorporate a Book data type so that I can serve multiple books with unique pages for each book. @NigelG proposed something along these lines earlier in this thread…

As I understand the data structure above, data type Pages will consist of lots of pages that belong to multiple books. These pages consist of Text (page copy) and a Page no.

I’m confused as to how I would associate data type Book with the appropriate pages from data type Pages. How will data type Book know which pages to pull from data type Pages to create the appropriate list of pages?

My guess is that there would need to be an additional field in data type Pages that would tie it to a specific book. Maybe a drop down that would allow me to choose the book’s Title (which is a field of data type Book).

Not sure as to the best way to make this association. Any suggestions would be most appreciated.