Change form CSS based on calculated condition

[boognish]

I have the following raw query:

SELECT product_coal AS product,
MIN(price_per_ton) AS best_price_per_ton
FROM commodity
GROUP BY product_coal
ORDER BY id ASC;

This returns the best price per product type, and I would like the background-color property of the price field to become green when the price is lower than the relevant product type from the above query. Can anyone maybe give me an example implementation?

I've tried using the Dynamic Logic extension, and tried playing around with the setFieldCss function, but I must be missing something because I could not get it to work. Or should I do this in a hook or a formula rather?

Any help would be greatly appreciated as always.

[esforim]

Hi there, you should post those code if you already started on it, that way anyone who got coding skill might be able to spot a mistake or recommendation. Else you have to come back again to answer a question.

[boognish]

Hi there, thanks for the response!

I was trying to replicate the changing of CSS following the tutorial posted by user telecastg about dynamic forms in a front-end js handler.

I guess my question is two-fold:

1) Best way to do the query
2) Is my setFieldCss function below correct in principle?

define('custom:commodity-dynamic-handler', ['dynamic-handler'], function (Dep) {
    return Dep.extend({
        init: function () {
        this.controlFields();
        this.recordView.listenTo(
            this.model, 'change:pricePerTon', this.controlFields.bind(this)
        );
    },
    controlFields: function () {
        if (this.model.get('pricePerTon')) {
            // this logs the price to the console as it is being changed, so it means I'm on the right track I think.
            console.log(this.model.get('pricePerTon'));
            // Over here is where I think I should be doing the condition to check for the price
            // I'm just not sure whether I should do the query from here, or call an API or something else

            // Tried the below to see if the CSS changes (no conditional logic applied, just to test CSS),
            // but there must be something I missed because I get an error in console that 'setFieldCss' is not a function.
            // this.setFieldCss('pricePerTon', 'background-color:green;')
        }
    },
}); 
}); 

In short, what I'm trying to accomplish is that whenever someone creates a new "commodity", a green background before submitting price means it is the lowest price for that particular product type.

[telecastg]

Hi,

Please note that your custom dynamic handler has to be extended from the extension's dynamic handler class, NOT from the out of the box dynamic handler (that's why the error "setFieldCss is not a function" is thrown), so the line:

define('custom:commodity-dynamic-handler', ['dynamic-handler'], function (Dep) {

should be instead:

define('custom:commodity-dynamic-handler', [COLOR=#c0392b][B]['dynamic-control:enhanced-dynamic-handler'][/B][/COLOR], function (Dep) {

To change a background color see this section of the code example in the tutorial

Notice how the logic is based on the existing value of the entity attribute "type", the dynamic control extension is a front-end facility that allows you to alter visibility, colors, etc of fields, based on the values or changes to the values of existing fields (model attributes) or user credentials.

Can you post a screen capture of your detail view (form) showing what are you trying to accomplish ?

[boognish]

Okay I tried changing the define in the beginning, but there was an error saying the path to the plugin doesn't exist. Previously I tried to rememdy that error thinking I had the wrong version of the plugin. Turns out the heading should be

['[B]enhanced-dynamic-logic[/B]:enhanced-dynamic-handler']

So that gets me much closer to my goal!

Hi,

Please note that your custom dynamic handler has to be extended from the extension's dynamic handler class, NOT from the out of the box dynamic handler (that's why the error "setFieldCss is not a function" is thrown), so the line: should be instead:

define('custom:commodity-dynamic-handler', [COLOR=#c0392b][B]['dynamic-control:enhanced-dynamic-handler'][/B][/COLOR], function (Dep) {

To change a background color see this section of the code example in the tutorial

Notice how the logic is based on the existing value of the entity attribute "type", the dynamic control extension is a front-end facility that allows you to alter visibility, colors, etc of fields, based on the values or changes to the values of existing fields (model attributes) or user credentials.

Can you post a screen capture of your detail view (form) showing what are you trying to accomplish ?

Ah, I see what you mean.

So as per my screenshot, I would like to indicate to the user editing the field once that number is lower than a number derived from a query. You point above about the data having to be present already must mean that I should be calling an API at that point, which I also have set up specific endpoints for.

For some more context, I am running a NextJS instance as the front-end here, and the benefit is that I can create specific API routes from that end with data consumed from Espo instance, but I'm just now wondering which way would be optimal. My thinking here is that getting the data right there from the form should be the first choice, as the data comes from EspoCRM already.

On the other hand, setting up the API endpoints from my NextJS front-end is already done, and I can readily call that API at any time and let the CSS change accoding to my need.

Hope I'm making sense.

[telecastg]

I am not familiar with NextJS but the plug-in will work as long as it has values to compare, perhaps you could create a non-storable field ("bestPrice" for example) and save there the number to be compared with "pricePerTon" to determine the CSS characteristics of the field.

You could trigger the API call from the css control function to determine the value of "bestPrice".

I think that you have an old version of the plug-in which was called "enhanced-dynamic-logic", you might want to get the latest one here https://github.com/telecastg/dynamic...ol-for-espocrm which is now called "dynamic-control" because this one is compatible with Espo versions 6 and above.

[boognish]

I actually tried that one already in previous attempts before I posted here.

See the screenshot of the error I'm getting. Any idea? I uninstalled to other version to install this one, and installing the previous one again doesn't give this error, so I'm wondering what could be the issue?

[boognish]

But that aside, the dynamic handler does seem to work, as I get the background to go green with the listenTo function anyhow.

I'll try your recommendations above and let you know if I have any luck.

Thanks for the help so far!

[item]

Hello,
delete the folder nbproject .. rezip and upload

[boognish]

Hello,
delete the folder nbproject .. rezip and upload

Hi there, that did it, thanks!

I can now use the new plugin, which is great.

Now I just need to figure out how to call the API from within that CSS handler script. I'm used to using libraries like Axios for this, is a way I could call an external API with Espo itself somehow?

[telecastg]

Now I just need to figure out how to call the API from within that CSS handler script. I'm used to using libraries like Axios for this, is a way I could call an external API with Espo itself somehow?

For me, easiest way would be to make an Ajax call to retrieve the back-end data like so: Ajax -> Controller -> Service -> Controller -> Ajax.

Check this code sample https://forum.espocrm.com/forum/deve...7719#post67719 Important, though you probably know it, is to structure the code so the application waits for the Ajax call to be completed before continuing.

This section of the documentation talks about ways to accomplish this. https://docs.espocrm.com/development...fore-rendering