Need help making a seating chart - EASY

Hi There,

I have a pretty simple project but need help as I am lost.

I am trying to make a seating chart for a call center.

I have 20 computers setup. When one user sits at a computer they will have a drop down bar with their name in it. They are supposed to select their name and its supposed to update the seating chart live so all users who are currently viewing the same app should receive live visuals of who is currently sitting where.

How would I be able to to do this?

Welcome to Bubble! If you would like to create information that’s visible to other users, first, you’d need to take a database-driven approach (ie. the user updates some value or creates a new record, then another user can see that data).

For your app, you can start with two basic data types:

  • Users (which is already part of every Bubble app, but add in a field for name)
  • Computers (which would include the fields: computer name, position and User)

So, you would create a database record for each of the 20 computers and for each employee you want to have in your call center.

Within this, you might draw a repeating group on the page, which would display a list of the 20 computers by doing a search for:Computers. And, as you set up the “template” in the first cell of the repeating group, you might have a button that says “Claim”

When the claim button is clicked, then it would update the value for that Computer’s User to the current user, which you can display in a text element on the repeating group.

I made a quick demo video to walk you through the process of setting things up. (Bare in mind, this is a very limited use case example, just to get you started).

Edit: sharing a link to the editor as well.

Dan (creator of LearnTo - 110+ tutorials covering all aspects of Bubble.

1 Like

wow! Thank you so much! Like I honestly did not expect anyone to help to the level you just did! I really appreciate it! I will do what you did and see if it works for me. Thank you again!

Glad it helped! Caught me at a time where I was looking for a fun puzzle to solve.

Question. So I did what you said and it worked but I am a bit confused on how to fully deploy this so I can start utilizing it.

The goal is to have a login screen when the URL is loaded. Each user has their account. When they sit at a specific computer they look at the number that is assigned to it and select “claim” on the app to update where they are currently sitting.

How do I deploy the app? Is there a setting I am missing? Like I want to be able to add them access to the webapp via their username and a password they set.

Thank you!

If you haven’t done so already, I really encourage you to work through all of Bubble’s tutorials as well as the resources on Stakk as well as my own tutorials site, LearnTo

If you want to have a login-based approach, first you need to create a mechanism for users to sign up via your app. Here’s a tutorial video on how that works.

Thank you very much my good sir.

Perhaps i should share with you my link to a test mock up of exactly what I am trying to do so it’s much easier to understand. https://socusers.bubbleapps.io/version-test/index/sample:user?debug_mode=true

That is the link to my current idea. You can see that I have setup what I am trying to have displayed across all users. My idea actually is not to have people sign into an account and then have to select a seat but rather just go the URL and immediately be displayed with the current seating assignments via the GUI.

The idea is to be super simple and user friendly. The way it should work is as follows.

  1. User goes to the url on their assigned computer.

  2. They are brought to the application displaying a drop down of all the employees who work in that department.

  3. The drop down will include their name which they have to select.

  4. When they select their name is stays as the current selection until they are no longer using the computer in which they have to manually deselect themselves from the drop down bar.

  5. When they do select or deselect themselves all other employees who are on the same URL can see the page update as users select themselves and deselect themselves.

and thats pretty much it. Anyway you could possibly show me how this is done using the same design I made?

Thank you so much!

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