How to update "current whatever" without going to a new page?

Hi

I’m trying to create a dashboard of sorts for my desktop website app.

For example it is set up so there is a dropdown list of items a particular user is the owner or manager of, each of which have various properties I want the user to manage.

On the same page are some input fields pulling information about that item from the Collection.

I want to click on one of the items in the list of items this user manages then have the content on the current page update all the fields to the content of the new item, not go to a new page.

I can’t figure out how to do this…

It seems like it could be solved just by allowing me to link back to the same page I’m already on but with the new data…just refreshing the page. Why can’t I do this???

I don’t think there is a clean way to do this, but I saw @Victor use our countdown component on a screen, and set the seconds to 0. This will immediately trigger the ‘on countdown finished’ action.

Maybe you can put this on the page, and put a white shape on top of it so that the timer is not visible?

Still a hack though.

Hi @naossoan,

If I got you correctly: you’d like to have a list of items (call it ITEMS), for example, on the left side of the page, and you would like to have a “content pane” on the right side of the page?
And you’d like to display content for the selected ITEM (i.e. click on the left list → display ITEM details on the right pane)?

To achieve this, you can do the following:

  • have a unique ID/Name/etc. for “ITEMS” collection
  • create an additional property in User collection. Call it “Selected ITEM”, it should be the same type as ID/Name/etc.
  • add an on-click action on the “left-pane” list. The action will be Update Logged-In User → Selected ITEM, set it to Current ITEM → ID/Name/etc.
  • on the right pane, put all content fields which you need, and make a list out of it. It will be a second list of ITEMS, with the filter “ID/Name/etc.” is equal to Logged-In User → Selected ITEM.

As a result, when you select the item from the list on the left, the right pane-list will be updated with the selected item. You can also add visual effects to display the selected item on the left.

With the dropdown, you’ll probably need an additional button for that, which will update “Selected ITEM” value for logged-in user.

In mobile apps this is usually done using 2 screens :slight_smile:

Best regards, Victor.

2 Likes

Ah very interesting, I will try that, thank you.

In the meantime since I was becoming so frustrated I got rid of the ability for the user to have more than one of those items. I kind of didn’t want them to be able to have more than one anyway, but since there didn’t seem to be a way to have a one-to-one relationship between two different Collections I just merged them into the User collection. So instead of a user being able to “own” the item I just made it part of the user collection itself ¯_(ツ)_/¯

I wanted to let the collections separate just for visibility sake but you can’t make one-to-one relationships.

1 Like

Since I converted my user group, I just made a test collection called Items and tested out what you said, and it works! Thanks!

It took a bit for me to wrap my head around it. I didn’t quite grasp that in order for say, a button, to have access to what I’m trying to change, it needs to be a part of the list.

It got me thinking and I was able to set up the same functionality by using two input boxes instead of using a collection entry.

  • Have a list of items you want to be able to change, on click → update the value of a hidden text box to the value of whatever it is you want to change
  • Have another input box with a default value of the whatever item/value you want to change, with a button. Convert this to a list like you were saying before.
  • Set the list to the collection of items, matching the value of the hidden text box
  • Set the button to update the current item’s value to whatever you type in the text box, as well as the hidden text box.

The text field and submit button with flash off, then back on again, with the new/updated value of the entry.

Pretty neat! Though it seems heavy on the page.

Any insight for what the “manual data” section of the page is for? I’ve tried messing around with that before, and you can use it to pull a certain value from one of your Collections, or just set a text or number as a “parameter” of the page. I could for example set it to be a Reference to one of the entries in one of my Collections, then go into a text element and use the magic text to set the value of the text element to one of the fields of that entry from the Collection.

What I would want to use that for, I’m not sure.

However, when setting it to Collection and choosing one of the collections from the dropdown, instead of Reference, this data doesn’t seem to be available at all as far as I can tell. I thought it would maybe give you the ability to use the collection data outside of setting something as a “list?” But this doesn’t appear to be the case. What is it for? I can’t find any reference to the manual data entry anywhere in the Adalo’s documentation.

Hi @naossoan,

Thanks for your reply, I’m happy you’ve found my solution to be useful.
Reg. your case with 2 input boxes - the main difference (as for me) between input boxes and logged-in user property are:

  • for the boxes, they are quite “universal” and could be used for non-logged-in users as well. Though (a) they may pick up the input focus in a browser, even if they are small and transparent, and (b) it’s not possible to do any mathematical operations with box’s content. And sometimes it is needed to implement “next-prev” functionality, for example;
  • for the property, you need to have a user to be logged in. But you are able to change the value based on some mathematical logic.

Reg. manual data - I never seen it working. As for me, it is some abandoned idea :slight_smile:

Best regards, Victor.

The input box is a bit problematic for other reasons too, such as it appears to cause a bit of performance issues.

However there’s a legitimate reason to use a hidden input box to hold a “variable” to so speak.

In my app, I have a screen like this, with buttons
“Register as a business”
“Sign Up”
“Log in”

Sign Up and Register as a Business take you to the same Sign-Up page, but depending on whether you chose Sign Up or Register as a Business, when you click the Submit button on the signup page it takes you to a different page.

Regular signup takes you to the home page, but register as a business pops up another modal to register your business.
(I’ve since separated the collections again)

The only way for me to do this, I think, since at this point there is no user logged in, is to have a hidden text box with the default value of “no”

Then when they click Register as a Business, it changes this input to say “yes”

Then on the sign-up page, the Submit button takes you to the Business register modal if that input box says “yes”, but directs you to the homepage if it says “no”

Of course, I could avoid doing that if I just used two separate signup pages, but that is more work! :smiley:

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.