Add a button to text - or other UI tricks

Hey all,
Have a UI problem to solve. I have a couple of plans, but don’t know how to pull them off.
Consider the following view:


I have a project tasks table inside a display table. This shows all the tasks for a project, estimated time and a complete checkbox.
Now to save making many bookings, we decided to group tasks into stages - and just make a booking for every stage of a project.
Some grouping of the table does wonders here.
I’ve got a button working which creates the booking, and adds the associated tasks.
However, as you can see, the UI is EXTREMELY cramped given the display table is so limited in the horizontal plane.
Solution 1 would be the ability to make the display table wider. We all use monitors with a minimum of 1920px width, meaning there is plenty of room to make the table wider. I have heard of people using custom CSS to do this… how difficult is it - and to then deploy to 6 staff / multiple workstations and laptops?
Solution 2 - having two grouped columns takes up lots of horizontal space. Is there a way I could put the button inside the “Project Save” text column - just at the end?
Solution 3 - Is there a way of making a duration column smaller - potentially formatting it into 01:30 fairly simply? I’ll look into that some more.
(I’m also changing “completed” to “done” as a column heading to save room!)
Any help or further ideas would be appreciated.
Cheers!

1 Like

Just by keeping at it, I’ve managed to squeeze more space horizontally.


While I’m not a fan of the estimated time being in 00:00 format, it saves tonnes of space.
I managed to convert it just by adding a new column of type time and using a formula to copy over the duration.
(Simply changing the original column from a duration to a time left the ability to edit the estimated time with a selection - which was doing my head in!)

And other than that, making other columns as thin as possible / changing the headings (as mentioned in OP) seems to have got me a “good enough but not great” result.

I think the idea of adding the button to the “Project Stage” column is the way to go - but I’ve not had much luck playing around with button() and since its unsupported, not sure its good to use in a live document that we’re running a business with.

Cheers!

Hi @Brendan_Woithe :slight_smile:
I feel too the need of more horizontal space, is one of the oldest question
“When coda will start developing 2 columns doc?”
Asap we hope :slight_smile:
In the meantime grouping waste way to much space and the best solution is to use table with less as possible row, like you did…

1 Like

Hi there!

What you could do, is use bottom navigation in the display view it will give you a lot more horizontal space. Then you could create a dropdown interactive filter for selecting the project to be displayed.

That’s how I solved a similar problem :slight_smile:

Cheers!

@Keith_Galloway Yes! This is a good implementation but it is still limited to the “standard max width” of the view itself, sadly as now if you have wider content you have to be creative :slight_smile:

@Brendan_Woithe

You can expand this layout to take full monitor width by pressing the three dots menu and going into Fullscreen mode (it’s not preserved when you reload the doc though or when you need to navigate away).

Also if the task name and duration are not meant to be edited there, you can just concatenate them into a multi-line text.

I think you can also concatenate the button to appear beneath the Project Stage with some tricks. Make a separate column where you Concatenate([Project Stage], Character(10), Button([Make Booking], "Make Booking", "Green") and group on that:

image

More on the Button() formula in the video in this thread:

2 Likes

What you could do, is use bottom navigation in the display view it will give you a lot more horizontal space. Then you could create a dropdown interactive filter for selecting the project to be displayed.

Ah - yes @Keith_Galloway this is a great idea. But with one issue I’ve been fighting with for weeks.
The “search” box is probably the number one used device for us, and the only way it can be shown (that I know of) is using the vertical menu.
I looked through all sorts of places trying to see if there was a way of implementing search in a different way, but I have yet to find it. As with most of these things, I’m often proven wrong though, so I always hold out hope! :slight_smile:

Oh now that is a GREAT little pixel saver. I had done something similar once before… using square brackets to surround the time to make it nice and visible.

I had moved the time to the end just to bring the check-box “in” from the right (it could sometimes fall off the edge of the table, and it was an important part of the view!)

Using full screen is also an option! With the different systems we have used over the years, the number one thing I’ve noticed is that ANY additional step required by the staff to use it decreases their engagement / how well they use the system. And I can see them definitely getting annoyed at having to do that - especially when moving around the doc as much as they do. Its a great idea, but I actually think sticking to the defaults / allowing the left side nav bar etc is more important in this case.

Cheers for the button info - I’m keenly looking into that now!

Just a quick update @Paul_Danyliuk - combining the time and the task name was a great idea. It did mean I went into quite a wormhole trying to format the duration
(formatted as hours) into a small number of characters - without using regex as I’m really not great at regex. I ended up with this as a formula… it works but eek!

Substitute(
Substitute(
if(EndsWith(thisRow.[Estimated Duration],"mins"),
Substitute(
Substitute(thisRow.[Estimated Duration]," mins","")
," hr",":"),
Substitute(thisRow.[Estimated Duration]," hr",":00")),"s","")," ","")

Hi again,
So after a fair bit of experimenting with slightly different approaches, this is what I’ve ended up with.
@Paul_Danyliuk - your link to your video was a massive help and exactly what I needed to understand the button() formula - and your ideas all round were spot on.

This is the end result. Think its working quite well, even if it is cramped.

My final question regarding the search box remains. Is it possible to see this search box when using the horizontal menu?

3 Likes

Hi @Brendan_Woithe

You should be able to search within an interactive filter to select the correct page, see here:

1 Like