Announcement

Collapse
No announcement yet.

Add custom text color to field

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Add custom text color to field

    Hi,

    I'm trying espocrm few days.
    like this a lot.

    I would just like to be able to change the color of the words in the fields, for example, for the priority.
    I would put red orange and green for the three states.
    but I do not understand how to make this change in json.
    I tried to change the "mypage.json" file ( picture in attached) that is generated for the language here:

    /custom/Espo/Custom/Resources/i18n/it_IT


    someone can kindly help me to conclude this change correctly?
    Thanks a lot to everyone!

  • #2
    You have to change entityDefs file, not language ( path - custom/Espo/Custom/Resources/metadata/entityDefs/mypage.json)
    Hope this example helps you (I got it from application/Espo/Modules/Crm/Resources/metadata/entityDefs/Task.json)
    {"fileds":{
    "status": { ----------------your fields name
    "type": "enum",
    "options": ["Not Started", "Started", "Completed", "Canceled", "Deferred"], -----------------your option list
    "view": "views/fields/enum-styled",
    "style": {
    "Completed": "success",
    "Canceled":"muted",
    "[option]":"[style]"
    },
    "default": "Not Started", --------------your default value
    "audited": true
    }, .............

    All styles are from bootstrap (["muted", "primary", "success", "info", "warning", "danger"])

    The W3Schools online code editor allows you to edit code and view the result in your browser

    Comment


    • #3
      tanya I had tried all the above, but still not getting any result - Do I need to add any code at the css file? Here is what I did:

      1- Add a custom field on module -> Lead
      2- Open Lead.json from the custom path -> /custom/Espo/Custom/Resources/metadata/entityDefs
      3- {
      "fields": {
      "test": {
      "type": "varchar",
      "required": false,
      "style": "success", <-------- This is the addes style
      "trim": true,
      "audited": false,
      "tooltip": false,
      "isCustom": true
      }
      }
      }

      4- Clear local Cache
      5- Administrator -> Clear Cache
      6- Administrator -> Rebuild

      Still not changes on Test field

      Am I missing something?

      Thanking in advance

      Comment


      • #4
        scratch Wondering if you were able to change the text colors finally? - Any Hint will be appreciated -

        Comment


        • #5
          Hi
          my text

          "style": {
          "Completed": "success",
          "Canceled":"muted",
          "[option]":"[style]"
          },
          style is an Object

          your text
          "style": "success"
          style is a string

          Style has to be an Object

          Comment


          • #6
            Hi Tanya,
            It works very well. How to define the color of the background? "bg-danger" is not enough.
            Peter

            Comment


            • #7
              Hey peterberlin can you add a sample of your working code .. I can't get this to work as Tanya suggested... Thanks

              Comment


              • #8
                My Example \htdocs\custom\Espo\Custom\Resources\metadata\enti tyDefs\Account.json
                It is works.
                Since the font is not thick in the form fields, The color of the font has little effect. It is better to change the background of the form fields than to change the color of the font.
                Unfortunately, I do not know how to do that.


                {
                "fields": {
                "name": {
                "type": "varchar",
                "required": true,
                "trim": true,
                "tooltipText": "hier steht der Firmenname",
                "audited": false,
                "tooltip": true
                },
                "status": {
                "type": "enum",
                "required": false,
                "options": [
                "aktiv",
                "Inaktiv",
                "rechtsstreit"
                ],
                "view": "views/fields/enum-styled",
                "style": {
                "aktiv": "success",
                "rechtsstreit": "warning",
                "Inaktiv": "danger",
                "[option]": "[style]"
                },
                "isSorted": false,
                "audited": false,
                "tooltip": false,
                "isCustom": true
                }
                }
                }

                Comment


                • #9
                  Thanks for the above e.i, But to be able to change the background will be definitely a better approach, hopefully somebody can give us a hint!

                  Comment


                  • #10
                    Hi

                    from enum-styled detail tpl
                    Code:
                    <span class="text-{{style}}">{{translateOption value scope=scope field=name}}</span>
                    You can set any additional class after space, for example
                    Code:
                    "style": {
                                    "Completed": "success bg-danger"
                                }

                    Comment


                    • #11
                      tanya thank for the tip off - Works as described - Now where I can find the tpl files - I'd like to add the styling capability to other fields.

                      Comment


                      • #12
                        hi
                        client/res/templates/fields

                        Comment


                        • #13
                          Thanks. Also for anybody struggling with this make sure to add "view": "views/fields/enum-styled" on the custom field.

                          Comment


                          • #14
                            Hey tanya I'm trying to change bg color for opportunity -> stages, but it seems like it uses his own custom view- Here is the code that I'm using :

                            "view": "views/fields/enum-styled",
                            "style": {
                            "Negotiation/Review": "bg-success",
                            "Prospecting": "bg-info"
                            },

                            I also check this file client/modules/crm/src/views/opportunity/fields/stage.js but not sure if I can add the styles here to make it work.

                            any Tip will be appreciated - Thanks,

                            Comment


                            • #15
                              Originally posted by tanya View Post
                              Hi

                              from enum-styled detail tpl
                              Code:
                              <span class="text-{{style}}">{{translateOption value scope=scope field=name}}</span>
                              You can set any additional class after space, for example
                              Code:
                              "style": {
                              "Completed": "success bg-danger"
                              }
                              if you write "bg-info" the class will be class="text-bg-info", if you use "success bg-info", you will have "text-success bg-info",
                              try "default bg-info"

                              Comment

                              Working...
                              X