Adding Element to Product List Page

Hi,

Supposed I wanted to add a button next to the create product, how do I do that?
It seems the files I have to edit is located in

/my-treopim-project/client/modules/pim/src/views/product/list.js

But I don’t see the part that renders the element.
Can you help me?

Thanks in advance!

P.S, the screenshot

Hi octosa,
Edit or add the file custom/Espo/Custom/Resources/metadata/clientDefs/Product.json and add there the following:

{
“menu”: {
“list”: {
“buttons”: [
{
//your button options
},
APPEND
]
}
}
}

But when you edit such files “/my-treopim-project/client/modules/” (like “/my-treopim-project/client/modules/pim/src/views/product/list.js”), after the module update your changes will be overwritten.

Hi tetiana,

thanks for the reply, the Product.json currently have this code written :

{
     "kanbanViewMode": false,
     "color": null,
     "iconClass": "fas fa-box-open"
}

so do I edit them to be like this?

{
"menu": {
    "list": {
        "buttons": [
            {
                "kanbanViewMode": false,
                "color": null,
                "iconClass": "fas fa-box-open"
            },
            "APPEND"
        ]
    }
}

also can you elaborate on what options are available for the buttons?

Thank you

Update :

I’ve tried this code :

{
"menu": {
    "list": {
        "buttons": [
            {
                "label": "Lorem",
                "color": "red",
                "text": "Ipsum"
            }
        ]
    }
},
"kanbanViewMode": true,
"color": "#FFFFFF",
"iconClass": "fas fa-box-open"}

and it shows some blank buttons after the create product button

what are the options for adding buttons?

thank you.

Hi octosa,
Here is the example of options for the button:

{
“label”: “Compose”,
“action”: “composeEmail”,
“style”: “danger”,
“acl”: “create”
}

You can also use the search in the project to find some other examples like this.

There are two variants of the button in the system: link and button. Examples for button you can see above.
Examples for link:

{
“label”: “Emails”,
“link”: “#Email”,
“style”: “default”,
“aclScope”: “Email”
}

Hi tetiana,

Thanks for the help, I found the trick for adding element.
After changing the json file, I need to save it in Administration > Entity Manager > Products > Edit, and click Save. I need to click the save button otherwise the button will not show

This is the configuration on custom/Espo/Custom/Resources/metadata/clientDefs/Product.json

{
"menu": {
    "list": {
        "buttons": [
            {
                "label": "SUPIM",
                "style": "info"
            },
            {
                "label": "FILE",
                "style": "danger"
            }
        ]
    }
},
"color": "#ffffff",
"kanbanViewMode": false,
"iconClass": "fas fa-box-open"}

and the result is below

I have another question.

  1. Can I put another element beside button? Like an Input text or file?
  2. Is there an option for positioning? Because I want the button to be before the Create Product button.
  3. Looking at the example, you can call a function on click (action). Where do I declare the function?

Much thanks tetiana.

Here are the answers to your questions:

  1. No, it is not possible
  2. No, it is not possible
  3. Create a file

client/custom/src/views/product/list.js`

with:
Clipboard%20-%20September%2012%2C%202019%202_41%20PM
And where you added buttons, add “views”:
Clipboard%20-%20September%2012%2C%202019%202_43%20PM

Got it. Thanks a lot for your help and response tetiana

1 Like