Add an Option to the display rule

Use case: I have a table with all kinds of action items, to follow-up on a sale we have to different confirmations, contract signing, etc…

So, in Monday.com style, I have made a table: to be done fields are red and have an action button. Done fields will be green and that works fine with the current display rules.
Now what I would like to add is a custom text, or the content of an existing field in the same record (like which user has done the action). I could do that with an extra column, but it would be nice to do that inside the green field, so you don’t waste any screen space.

Currently it looks like this:

Could you add options for

  1. display custom text
  2. display content of a chosen field in the same record

Hey Peter!

For this, I recommend utilizing the equation field for your column display purposes. This field can be used to conditionally display the original field’s value or a custom text value using the IF function.

Here’s an example of this:

Below you can also reference the sample equation function that I used for the above. Please note that the current version of the equation field does not work well with spaces in returned text so I recommend using CONCAT and CHAR(32) to create text including spaces.
IF({Is Complete?}='Yes', CONCAT('The', CHAR(32), 'task', CHAR(32), 'has', CHAR(32), 'been', CHAR(32), 'completed!'), {Is Complete?})

1 Like

@Lee I don’t think this is what I mean. I have chatted you about it.
What I want to do is: within a table, within a field: first I have an action button. If pushed the field should become green, also mentioning the text: who and when this action has been done.

image

Thanks for providing that clarification! I see now what you’d like to do.

I slightly altered my equation method to accomplish what you’d like. Essentially, using the equation, we can still determine what to display. With the addition of some JavaScript, we can set up the display of the action link to appear based on what the equation value shows.

I’ll show you how to set this up. First, let’s set up the equation. We’re going to use the equation value as the display for the action link so you’ll want to set up a condition using IF to show the button text or the message that you’d like to show instead of the action link.

For this example, I show “Set to complete” on the action link button or “The task has been completed!” if the action link has already been clicked. You can set up your equation to show another field’s value or static values.

image
For reference, here’s my equation function:
IF({Is Complete?}='Yes', CONCAT('The', CHAR(32), 'task', CHAR(32), 'has', CHAR(32), 'been', CHAR(32), 'completed!'), CONCAT('Set', CHAR(32), 'to', CHAR(32), 'complete'))

Once you have your equation set up, go to the page where you have your table component. Here well set up the action link and add JavaScript to the page.

First, let’s make sure the action link is configured accordingly. Open up the link in your table component to edit it.

  1. Set up your equation as the display value of the action link. This way, the action link will display the button text or the other value accordingly.
  2. Add a CSS class to your action link. This will be referenced in the JavaScript so be sure that it matches my example “act-link” or be sure to remember this value so you can change the JavaScript in the next step.


After this, you’ll be able to see that your equation value displays as links on the page side. Now, we’ll add JavaScript to update the value that does not need to be a link to display as regular text on the page.

Here’s the JavaScript code that you’ll be adding to the JavaScript tab of your page:

TB.render('component_id', function(data) {
    var links = document.getElementsByClassName('act-link'),i = 1, temp, text, removeThis;
    var numLinks = links.length;
    while(i<numLinks){
        removeThis = links[i].getElementsByTagName("a")[0];
        removeThis.setAttribute("onClick", "window.location.reload();");
        text = removeThis.innerHTML;
        if(!text.contains("Set to complete")){
            removeThis.remove();
            temp = document.createElement('span');
            temp.innerHTML = text;
            links[i].appendChild(temp);
        }
        i++;
    }
});

Before testing out the final result, you will want to make an update to the JavaScript code above. Be sure that you update the “component_id” to your table’s component ID. Additionally, if you set your own custom CSS class for the action link in the previous step, please change “act-link” in the code accordingly.

For reference, you may find the component ID in the page builder by hovering over the info icon.

After you’ve updated the JavaScript, you’ll be able to test out the changes on your page.

Hope this provides a solution for what you’ve been looking for. Let me know if you have any additional questions! :slightly_smiling_face:

1 Like

Thanks, it is now working. We just needed to change to " for it to work.

How would you solve this with pagination? It seems that only the first page will work…

@Lee does this solution break the Display rule?
image


(P.S. see also the question about Pagination ↑ ↑ ↑)

We solved the background also with JavaScript

TB.render(“component_3”, function (data) {
var links = document.getElementsByClassName(“act-link”), i = 1, temp, text, removeThis;
var numLinks = links.length;
while (i < numLinks) {
removeThis = links[i].getElementsByTagName(“a”)[0];
removeThis.setAttribute(“onClick”, “window.location.reload();”);
text = removeThis.innerHTML;
if (!text.contains(“Set to sent”)) {
removeThis.remove();
temp = document.createElement(“span”);
temp.innerHTML = text;
temp.style.color =“white”;
links[i].appendChild(temp);
temp.parentNode.style.backgroundColor = “green”;
}
else {
removeThis.parentElement.parentElement.style.backgroundColor = “red”;
}
i++;
}
});

End result:
image

Remains the question about pagination. @Lee

Hey Peter, just getting back to you with an update on this!

Please contact me in chat or ticket to verify the issues that you are currently experiencing with the pagination. I did have a chance to test this out with the updated code and I can see that the display is properly applied throughout the pages of my table, however, perhaps there is another customization or other configuration that is applied on your data table that I do not have on my sample.
image