Dynamic html attributes

Ask us anything How do I?
1

I would like to dynamically apply HTML attributes to my form’s input elements.
I am able to manually apply a set number of attributes using the +Add attribute button on the input element’s settings.

When I try to bind the attributes to a variable, nothing happens. I’ve tried several formats, but there’s no expected format validation on this so I’m just guessing.

I’ve tried the formats below with 0 success

{ 
  "maxlength":"12",
  "minlength":"8"
}

and

[ 
  { "name":"maxlength", "value":"12"},
  { "name":"minlength", "value":"8"}
]

and

[ 
  { "maxlength": "12"},
  { "minlength": "8"}
]

help!

2

Nevermind! Option 2 does the trick.

Is it possible to add boolean attributes in this array as well? e.g. required?

It appears that if the WeWeb component has a setting for the attribute (min, max, required etc), that attribute is ignored.

Is it possible to override those settings? What is the order of operations that they are applied?

I have built a CMS for my team where they can dynamically build a list of HTML attributes for our form inputs. It’s substantially less work for me to bind this entire list - rather than manually clicking through the available settings in WeWeb, doing a lookup in my attribute list, etc.

omitting value from the object does not work, e.g.

[ 
  { "name":"maxlength", "value":"12"},
  { "name":"minlength", "value":"9"},
  {"name":"required"}]

neither does providing a null e.g.

[ 
  { "name":"maxlength", "value":"12"},
  { "name":"minlength", "value":"9"},
  {"name":"required", "value":null}
]
1 Like
3

for boolean attributes try "value":"" or "value":"true"

1 Like
4

Bumping in lieu of tagging moderators…

5

The solution:

  1. fork your desired component from weweb-assets · GitHub
  2. remove the relevant attributes in src/wwElement.vue
  3. remove the corresponding settings in ww-config.js

From here, follow the instructions to load your component inside weweb’s dev mode

6
  1. keep your fork in sync with future updates
2 Likes