Empty screen + custom segment picker

Hi Glide community,
here is what I need help with => see below + attached image.


INTRO
I have an item screen where users can make two things:

  1. Like/favourite this item (heart icon – top right, highlighted pink), AND/OR
  2. Mark this item if already purchased (toggle on/off – bottom right, highlighted yellow)

WHAT I WANT

  • I want to create a custom “My items” screen
  • on this screen I have a segment picker to choose/switch between liked and already have
  • when switching between those two I would actually like to switch between two types of content:
  1. under “liked segment” I would like to display items that the user has liked/favourited (item can be toggled on or off)
  2. under “already have segment” I would like to display items that have been toggled ON (item can be liked or not)
  • when there is no item that is liked, an empty screen is displayed under “liked segment” instead => this empty screen includes some illustration/graphics and text
  • same goes for the “already have segment” when none of the items is toggled on
  • just to be clear: I want to have two separate empty screens, for each segment one

MY PROBLEM

  1. How to make a custom segment picker as described?
  2. How to make empty screens content visible when there is no item to display and how to hide empty screens when (at least one) item is displayed under its segment? I guess this is done by setting visibility conditions, but I didn’t manage to make it work.

Thank you in advance.

1 Like

first, I wanna say, that is the best asking for help I have seen, nice job!

  1. to create a custom screen… simply choose action show new screen.
  2. have a choice component with values liked and purchased, that writes answers to a user-specific column.
  3. have a two-inline list with visibility conditions on that USC column to toggle between them.
  4. create an IF-ELSE column to find liked items… IF email is signed in user then liked column value, the same thing for the purchased column.
  5. create roll-up columns to sum these IF-ELSE columns…that way you would know if there are liked or purchased items for that user.
  6. have an element (image, text…) that will be visible if these Roll Up columns show 0

I’m going to bookmark this question and use it as an example of how to ask a question.

Choice components do not support actions, so it will not be possible to have separate screens. Everything will need to be on a single screen with visibility settings controlling what is seen.

Assumption:

  • Both the like/favourite and already purchased components are writing to user specific boolean columns in your items table.

I would probably create a separate working table to drive this screen. In that table, create the following columns:

  • Template column that contains the word true
  • Multi-relation column that joins the template column to Items->Is Favourited
  • Multi-relation column that joins the template column to Items->Already Purchased
  • User Specific column to hold the user selection from the segmented choice component

Then on the screen, the following components:

  • Choice component, as shown in your screen shot
  • Inline List using the first multi-relation as a source. Visibility should be when choice is ‘Liked’
  • Inline List using the second multi-relation as a source. Visibility should be when choice is ‘Already have’
  • Component for “No Liked Items”. Visible when choice is ‘Liked’ and Liked relation is empty.
  • Component for “No Purchased Items”. Visible when choice is ‘Already have’ and Purchased relation is empty.

I think that should do it. Note that Inline Lists will automatically hide themselves when there are no items in the list, so there is no need for an extra visibility condition on those to check if the associated relation is empty.

4 Likes

Hi Darren,
thank you for your feedback, but I still can’t manage to make it work


Some additional information & questions:

  1. Your assumption is correct => both components are writing to user specific boolean columns in my items table
  2. Can you please be more precise how to create all 4 columns suggested? I created them as you wrote, but they don’t work like they should, therefore I guess I am not doing it right.
  3. How can I make a choice component as shown on my screenshot? I guess I have to create a separate column with both values (liked and already have) as I need to display these labels/names, right?
  4. Visibility condition is not working either => I will come back to that later, as I guess they are not working correctly as long the 4 columns in my new seperate table are not containing correct values.

I am kindly asking for further detailed instructions …
I am quite new with Glide, therefore some things are not as logical to me yet as they will (hopefully) be one day.

oh, sorry. Your question was so well presented that I guess it caused me to make some assumptions about your level of familiarity with Glide. Okay, no problem.

The template column should look like the below:

The purpose of it is to allow relations to be created that match boolean columns. It just populates every row in the column with the word true.

The two multi-relation columns are used to establish a filtered link between the choice selections and the actual data. Here is an example:

Screen Shot 2021-12-08 at 9.15.37 AM

In your case, you’ll be matching the true value to the columns in your Items table ( Is Favourited & Already Purchased). It’s important that you tick the “Match Multiple” box, as you want to return all results so that you can use them in a list.

The User Specific column is nothing special, expect for the fact that it should be User Specific. The reason for making it user specific is so that each user can change the filters and get their own view without affecting each other.

Yes, that’s correct. That column you mentioned should be used for the Values in your Choice Component, and the User Specific column should be used for the Data. To get the design that you want, you can use it in Segmented Mode.

If you’re still having problems getting it working, please share some screenshots that show how you have both the columns and the screen components configured, and we’ll help you figure it out.

3 Likes

Darren,
thank you very very much. It works! :partying_face:

One last thing:

  • is it possible also to make a column (actually two) in which the date&time of user action is recorded (when user has selected liked and/or already have)? If yes, how?
  • this would then allow me to sort items under each segment by date

Yes, it’s possible. But you’ll need to change the components that you are currently using for “Liking” items and indicating that they’re already purchased. And you’ll also need some extra logic.

I’ll explain why.

  • What you’ll need to do is create two date/time user specific columns - one for “Liked At” and one for “Purchased At”.
  • It’s important that these columns are user specific, as the dates will be different for every user.
  • Now when a user “likes” an item, or when they mark it as purchased you can do a Set Column Values and set the associated date/time column to the current date/time.

The problem with the above is that neither of the components that (I assume) you’re currently using - favourites and switch - can have actions configured. So you’ll need to change those to something else, and then use a Set Column Values to set both the boolean and the date/time column at the same time.

In terms of which components to use, it doesn’t really matter, as long as you choose components that support actions. But some will be easier to make work with this than others. Probably the simplest choice would be a Button Bar. Then you could use one button for “Liked” and the other for “Already Purchased”.

The next problem that you’ll most likely run into is that you’ll probably want the button labels to change depending on the status. For this, you could use an if-then-else column to create a dynamic label. For example, you might do the following for the “Like” button:

  • If user specific boolean is not true, then "Like :+1: "
  • Else "Unlike :-1: "

And then use that as the button label.

So as you can see, it’s possible. It just gets a little complicated because the components you’re using don’t support the methods that you need.

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