CMS Development

LMeert
Guía | Partner nivel Platinum
Guía | Partner nivel Platinum

Can't add visibility condition on theme field

resolver

Good morning !

As said in title, I'm trying to conditionnally display fields in the theme settings, the same way we'd set up a conditionnal field on modules via the interface.

I've had a look at the code generated by setting up a condition on a module and tried to reproduce on the theme fields.json file, but the interface is giving me an error I can't find my way around.

 

 

Basically I want to give users a way to choose whether they will be using a google font or a custom font from the theme settings (as currently, the themes don't natively support picking a custom font from the theme settings, this is part of a workaround).

 

LMeert_0-1657531304142.png


I've created a picker, which works fine, to let the user pick from custom fonts and google fonts.

I've got two font fields, primary and secondary, and I simply want to make them visible in the settings if the font_type selected is "google".
The "visibility" code for both fields seems to have the right structure, but it won't accept any value for the "controlling_field".

I've tried to add the relative field path (font_type) or the full path (theme.global_fonts.font_type) but I can't publish, it's giving me an error : 

Error:null: no controlling_field with id 'theme.global_fonts.font_type' exists
or
Error:null: no controlling_field with id 'font_type' exists
 
I've tried adding them with or without quotes also => not working...
 
Any help would be much appreciated !
 
Thanks,
Ludwig
Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

0 Me gusta
1 Soluciones aceptada
Oezcan
Solución
Colaborador líder | Partner nivel Diamond
Colaborador líder | Partner nivel Diamond

Can't add visibility condition on theme field

resolver

Hello @LMeert@tiennguyenvan and @Jaycee_Lewis,

 

I had the same problem once and it really took me a while to understand that it's about a new key. So you have to write a new key, like "id" in this case. And then add a value to this, e.g. 1 and connect it to the others eg: "controlling_field": 1.

 

The whole thing would look like this, for example.

 

[
  {
    "name": "field_group",
    "label": "field_group",
    "required": false,
    "locked": false,
    "type": "group",
    "children": [
      { "id": 1,
        "name": "choice_field",
        "label": "Choice field",
        "required": false,
        "locked": false,
        "display": "select",
        "inline_help_text": "",
        "help_text": "",
        "type": "choice",
        "placeholder": "",
        "default": null,
        "choices": [
          ["value 1", "Label 1"],
          ["value 2", "Label 2"]
        ]
      },
      {
        "name": "font_field",
        "label": "font_field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "load_external_fonts": true,
        "type": "font",
        "default": {
          "size": 12,
          "font": "Merriweather",
          "font_set": "GOOGLE",
          "size_unit": "px",
          "color": "#000",
          "styles": {}
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 1"
        }
      },
      {
        "name": "color_field",
        "label": "Color field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 2"
        }
      }
    ]
  }
]

  

Maybe there is another solution, but this is how it worked for me.

I hope I could help you.

 

Best regards,

Özcan

Oezcan Eser Signature

Ver la solución en mensaje original publicado

5 Respuestas 5
Oezcan
Solución
Colaborador líder | Partner nivel Diamond
Colaborador líder | Partner nivel Diamond

Can't add visibility condition on theme field

resolver

Hello @LMeert@tiennguyenvan and @Jaycee_Lewis,

 

I had the same problem once and it really took me a while to understand that it's about a new key. So you have to write a new key, like "id" in this case. And then add a value to this, e.g. 1 and connect it to the others eg: "controlling_field": 1.

 

The whole thing would look like this, for example.

 

[
  {
    "name": "field_group",
    "label": "field_group",
    "required": false,
    "locked": false,
    "type": "group",
    "children": [
      { "id": 1,
        "name": "choice_field",
        "label": "Choice field",
        "required": false,
        "locked": false,
        "display": "select",
        "inline_help_text": "",
        "help_text": "",
        "type": "choice",
        "placeholder": "",
        "default": null,
        "choices": [
          ["value 1", "Label 1"],
          ["value 2", "Label 2"]
        ]
      },
      {
        "name": "font_field",
        "label": "font_field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "load_external_fonts": true,
        "type": "font",
        "default": {
          "size": 12,
          "font": "Merriweather",
          "font_set": "GOOGLE",
          "size_unit": "px",
          "color": "#000",
          "styles": {}
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 1"
        }
      },
      {
        "name": "color_field",
        "label": "Color field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 2"
        }
      }
    ]
  }
]

  

Maybe there is another solution, but this is how it worked for me.

I hope I could help you.

 

Best regards,

Özcan

Oezcan Eser Signature
Jaycee_Lewis
Administrador de la comunidad
Administrador de la comunidad

Can't add visibility condition on theme field

resolver

Thank you, @Oezcan 🙌

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Me gusta
LMeert
Guía | Partner nivel Platinum
Guía | Partner nivel Platinum

Can't add visibility condition on theme field

resolver

Hi @Oezcan,

 

Thanks for taking the time to answer, I'll try that this morning and will mark this a solution if it works !

 

I still think this should be present in the themes documentation and I hope they're going to fill the gap soon, this can be very important for building a user friendly theme settings interface and avoid confusion.

 

Cheers,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

0 Me gusta
tiennguyenvan
Participante

Can't add visibility condition on theme field

resolver

I am also trying to have this feature. Following your post.

Jaycee_Lewis
Administrador de la comunidad
Administrador de la comunidad

Can't add visibility condition on theme field

resolver

Hey, @LMeert! Thanks for the interesting question 💡 — @Stephanie-OG @Sjardo @Oezcan, do you have any insight into what else @LMeert can try here?

 

Thank you very much! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot