Button Bar more than two buttons

Hi all,
I saw some discussions here about using CSS to allow more than two button. Here’s one discussion with an idea from @Robert_Petitto

I’m sure it’s a simple code, but I cannot understand how to add more than two button, as shown here:

I would like each button to have its own action. In other words, a button bar with more than two buttons :slight_smile:
Thanks

I find that the easiest way to get three or four buttons in a single row is to use an inline list with a tiles layout, and then configure it to work as a button bar.

4 Likes

Wow, I was just reading it here :slight_smile:

I haven’t figured out how to do this part:

Can this allow each button to have its own action, regardless of the other buttons?

1 Like

Yes. And that’s what I described in the post you linked to. You just have a custom action with a separate condition for each item in the list.

So it’s not a separate action per se, but rather a single action with multiple branches. But the end result is the same.

I admit, couldn’t understand how to do it :confused:

Well, without knowing anything about your specific use case, I can offer the following generic advice:

  • Create a separate Glide table just for your inline list button bar
  • It should have one row for each of your “buttons”
  • And the following columns:
    – Label: the label for the button
    – Index: an integer that numbers the buttons from 1 to n

Then when you create your custom action, you’ll have one branch for each button:

  • If Index equals 1, then blah
  • If Index equals 2, then blah blah
  • etc…

If you need the buttons to perform actions on the current table (the one that’s attached to the screen you’re working in), then you’ll usually need to create a single relation between the two tables.

3 Likes

Thanks for accommodating slow-learners such as myself.
My use case is compose email to different recipients.
I’m still not understanding how to:

  1. make the inline list look like buttons,
  2. build the branched action (or even before that, understand where the selected “index” is stored)
    Thanks
3 Likes

WOW, thanks again!
My previous two questions are now answered. But, as you probably expected, your video brought also questions (not just answers):

  1. Could you please explain how you manage the colors?
  2. I saw an ITE column there related to image. Could you elaborate on that?
    Thanks!

And on a side topic, related to branched actions:
Is there a way to connect two branches?
So we first split into branches which (for example) sets the email recipient, then we connect all branches and have a “compose email” action using that recipient ?

That if-then-else column looks like this:

One of the rules for navigation is that you can’t go more than two weeks in the future. So the whole purpose of that if-then-else is just to give the right hand button the appearance of being disabled once you’ve gone forward two weeks. sv/offset-days is just taking the current value of the “Days Offset” from the dashboard table (which itself is what gets incremented via the actions).

The images themselves are done using the Image from Colour plugin. So the colour-1 and colour-2 columns define the hex codes, and the next two columns generate the images using those codes.

No, you can’t reconnect two branches.
But your use case sounds a little dodgy to me. If all you’re doing is setting an email recipient, why can’t you do that with an if-then-else column, and then use a single-branch action?

I’m sure I can (if you believe so), simply don’t know how-to :slight_smile:
I’m also struggling with another issue with something a little further down the road for the same use case
The customs inline list/multi-button component is sitting inside a screen showing client details. The whole purpose of this multi-button is to compose an email message related to that client. For example, one of the “buttons” will be “finance”. If a user clicks on this button, it means he’d like to ask the finance team for a question about this client. I’d like to help that user with a templated email, as follows.
Once we have the recipient, I’d like Glide to compose an email to the finance team. The email should include the client name (or other values from the client row in the “clients” table) AND a deep-link to his screen in the app. The deep link I think I can manage by using “set column values” for our temp table and populate a designated column with a “link to this screen”. Is that the right way to do it? Any ideas about how to retrieve the client name (or other details)?

Okay, so here is a suggestion.
If you set it up like I demonstrated (with a separate table for your inline list), then all you need to do is include an extra column in that table for the email address, and then populate each row with the appropriate values. Then you don’t need any additional logic - you just use the email address associated with the row of the “button” that was tapped.

For your second question, before I answer that one - is your screen sitting on a single row working table, or are you on a details screen somewhere in your clients table?

That’s great. So now I have the colors generated and I have pointed the “image” configuration to that column, but…nothing happens :frowning:
Buttons remain gray.
Don’t laugh, I’m sure it’s a simple/common step that I missed.

This :slight_smile:

oh yeah, I forgot to mention that. You’ll need to add a bit of CSS to suppress the tile overlay:

<pre><span><style>
[data-test="tile-item"] .tile-overlay { background: none; }
1 Like

Did the trick, you’re the greatest :1st_place_medal:

Okay, so what I’d probably do is find a way to get the current ClientID into that Inline List table, and then apply it to all rows using a single value column. Then you can use that to build a single relation to your clients table, linking to the client ID. And then you can use lookup columns to bring in whatever client details that are needed. This will make them available to be used with the Inline List action.

How you get it there in the first place kindof depends. I’d probably do it as part of the action that navigates to that screen in the first place.

How so?

Okay, well I’m using a bit of guesswork here, but anyway…

I’ll pretend that you’re starting with an Inline List of clients, and then tapping on a list item takes you to a details screen for the selected client.

  • Create a template column in your Clients table, using the current users ID (same as I showed in the video)
  • Create the same template column in your Inline List table
  • Now build a single relation from your Clients table to the Inline List table, using those two template columns
  • Add a user specific column to your inline list table for holding the current Client ID
  • Add a single value column to take that value and apply it to all rows in the same table

Now, change the action on your clients inline list so that it:

  • Does a set column values via that single relation, setting the user specific column to the value of the client id
  • Then does a show details screen

You might find that changing the inline list action will break your current screen configuration, so be prepared for that. Perhaps make a copy of the inline list component first. (This is one reason why I ALWAYS use custom actions)