Better formula editor

A +1 on this feature! Looking forward.

+1 from me too!

Cheers.

One more suggestion: All formulas to have optional name and description fields where you can describe the usage and logic behind the formula.

Then there could be a list of of formulas in the “Doc map”. Especially in a more complicated Doc it would make things more manageble.

1 Like

I think the formula’s have a ‘name’ - it’s the column name itself. So the formula name is Table.[Column]. You can further target a specific row by typing @ and then the value in the ‘Display’ column.

This is separate from when you write =formula() on the canvas where that can be a discrete formula which you can reference.

Being able to add a description or comments would be amazing - AND is a more technical than resizing the window (v2) :slight_smile:

You’re right in saying that formulas in column technically have a ‘name’ but it’s more the name of the column used when displaying the data and not the formula specifically, and I can’t see a list of formulas I have in columns.

I’ve noticed I tend to make quite a lot of logic inside the column formulas, and it’s hard to keep track of them.

I don’t know what is the best solution, but what I would like is a way to see what formulas I have created in columns. And more obvious way to see which columns have formulas - for example when writing a new formula and referencing the column. Maybe a different icon with columns with formula?

OK so one idea I have used is to have a ‘database’ folder in your doc where you keep the tables with all of the ‘hard coded’ (non-formula) columns, then have another table in a folder called ‘Formulas’ (I use ‘fx’) and in that one I reveal everything. You are right it would be nice if it was baked into the UI. Another thing you can do is slowly drag your cursor along the header row and the columns with formulas with show the f icon.

1 Like

+1 to this please :smile:

Would make a big difference to productivity

I was playing around with this more and actually got pretty good results overriding some CSS to expand the formula editor:

/* Allow a wider view */

.formula_builder--root--MsCMk97F {
  width: 800px;
}

/* Allow a bigger height - would be better to calc() this in relation to current y position, but this works as a simple solution */

.formula_editor--root--1bazHdJA {
  max-height: 100%;
}

/* Allow for a wider width for a different view (I don’t remember exactly why I created this) */

.canvas_formula--popover--jY_Gbymw {
	width: 800px;
}

Put these into your favorite browser extension to inject CSS, I was using Chrome extension “User JavaScript and CSS”

4 Likes

Thanks for the discovery, Jami!

Just one thing. I wouldn’t rely on those --MsCMk97F etc to stay forever as class name pieces. Those look like autogenerated (versioning?) suffixes that may change at any time.

Rather use *[class^=formula_builder--root] selector that means “class attribute starts with”.

1 Like

Thanks for the tip Paul, I didn’t think of using that kind of a selector.
You are right, the hashy names of classes as such are very likely to change.

I thought this would be a great hack, however the CSS didn’t work. I did some research and it turns out you need to wrap the class in “double quotes”:
[class^="formula_builder--root"]

That’s the CSS. However I have not been able to get any CSS overrides to work in Coda.
I tried:

div[class^=“formula_builder–root”],
div[class^="formula_editor–root],
div[class^=“canvas_formula–popover”]
{background-color: pink; width: 1800px;}

Using both of these extensions.
Live editor for CSS, Less & Sass - Magic CSS
User JavaScript & CSS Extension

It doesn’t work live on coda.io, but if I rapidly resize the window I can see the background green color. Not able to get the formula builder to resize.

For me the “starts with”-trick that @Paul_Danyliuk introduced works.
At least for me it works with or without the double quotes.

After a while trying to understand why your code I copy-pasted was not working I noticed few small problems and I managed to make it work.

The form plugin used here changes text not marked as code or preformatted text: double quote pairs to quotation marks and two adjacent dashes to a different kind of dash which explains why I had problems making your code work.

I’m guessing the reason the code was not working for you is one missing double quote after formula_editor--root. The working code should be:

div[class^="formula_builder--root"],
div[class^="formula_editor--root"],
div[class^="canvas_formula--popover"]
{ background-color: pink; width: 1800px; } 

As I mentioned I also use " User JavaScript and CSS" https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

I originally found @GJ_Roelofs 's awesome post about creating a Table of contents via JS using that extension. I added the rules on top of that.

For me my CSS additions work if with different settings. It only needs to be Enabled, eg. Highest Priority CSS is not needed.

As domain I use: https://coda.io/d

By the way, an easy way to test CSS rules is to inject CSS via Dev tools console like this (I find this easier to copy-paste than using the styles panel or using an extension):

(function(){
    let style = `<style>

    div[class^="formula_builder--root"],
    div[class^="formula_editor--root"],
    div[class^="canvas_formula--popover"]
    { background-color: pink; width: 1800px; } 
    </style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();
1 Like

@Jami_Haavisto you nailed it I was missing that double quote " and when added it fixed it 🤦

However that gave me width and pink but no height which is what I really desire. I was able to get that working with:

div[class^=“editable–root”] {max-height: 420px;}

Thanks this will make using Coda.io much more enjoyable :pray:

1 Like

Just FYI double quotes (or single quotes) aren’t necessary if there are no spaces in the argument value.

Here’s my variant of the CSS:

*[class*="formula_editor"] {
  max-height: 420px;
}
*[class^="formula_builder--root"],
*[class^="canvas_formula--popover"] {
  width: auto;
  min-width: 420px;
}

width: auto stops at screen end, unlike the fixed width of 1800px as suggested above. Height still may overflow though. I’m not super versed in CSS to find the bulletproof hack.

also wth would you want your editor to be pink? :thinking:

UPD: Full script to copy and paste into console when opening the doc:

(function(){
  let style = `<style>
    *[class*="formula_editor"] {
      max-height: 420px;
    }
    *[class^="formula_builder--root"],
    *[class^="canvas_formula--popover"] {
      width: auto;
      min-width: 420px;
    }
  </style>`;
  document.head.insertAdjacentHTML("beforeend", style);
})();
3 Likes

@Paul_Danyliuk you don’t edit your code with a pink background???

j/k when I am debugging CSS many times I will set background colors on elements which I am targeting to see if I am on target. Much easier to see a white background go pink or red than a margin-top increasing from 12px > 16px.

AND by the way, your CSS is perfect. I’m using it on my machines and have installed it on 3 team members. <3 thank you so much for all the great contributions you keep making to this community and product. This makes this great product even more enjoyable to use!

Oh goodness, it’s far away from perfect. I’m not using it myself actually — Formula editor width jumps all the time when I’m writing my formulas.

I’m not really a front-end dev. Last time I did CSS was back when Bootstrap and jQuery ruled the scene and it was still hip to layout with float: left. However, I have a friend who’s a HTML/CSS pro (and fanatically a freelancer as well, even has his own YouTube channel where he promotes freelancer lifestyle, but it’s in Russian) — I think I’ll just ask him for proper styles somewhere this week.

1 Like

Updated code, since they moved onto obfuscated class names:

(function(){
  let style = `<style>
    .m-Hp5xET._2vfTdh9o {
      max-height: 420px;
    }
    ._3J-qBubo._2GINOaoP._3yaQ6jOH ._3yaQ6jOH,
    ._3J-qBubo._3uTdWl5d ._3yaQ6jOH {
      width: auto!important;
      min-width: 480px;
      max-width: 1200px!important;
    }
  </style>`;
  document.head.insertAdjacentHTML("beforeend", style);
})();

It ain’t perfect, but it seems to do the job for now.

UPD: oh sorry, it also makes all popup menus wider. Oh well, don’t have much time to fix that now; just need larger formula spaces.

2 Likes

This is an amazing improvement!! @coda_team, please make this apart of the core product :slight_smile:

1 Like

Thanks for your amazing contributions. +1 on some native fix for the code editor window. I am really amazed there aren’t dozens of people here claiming for this, editing code is a nightmare as it becomes complex, and it usually does!

I have at least one or two columns in every table where I pray to never again having to touch its formula, as it requires full focus, photographic memory, and seven dragon balls to successfully edit them.

Also, almost every button column I create have big formulas where, again, hell unleash its burning flames.

Really, @coda_team, I love your platform but every time I edit code I am remembering your related people. Jokes apart, please take a look into this problem.

1 Like