Adding classes or other HTML properties when using schemas.fields?

Question

I'm outputting several form fields using schemas.fields (basically following the contact form example in the docs) - how do I add classes or other HTML properties to those fields?

Answer 1

You can add CSS classes to the "classes" property of the field when you define your schema. This is a string field, not an array, so just separate them with spaces.

You can also output your own markup, bypassing the schema field macros, provided you have the same name attributes, and data attributes. Note that the fieldset wrapper element must be present, although it doesn't have to be a fieldset HTML element.

The best way to do that is by creating this folder in your project (not in node_modules):

lib/modules/apostrophe-schemas/views

Then copy over the .html file for the field type you're interested in, such as:

string.html

And edit it.

At first it just invokes a macro coming from schemas/macros.html, so you'll likely want to copy in the body of that macro too so you can start making modifications.

If you want some string fields to be output differently from others, take advantage of the fact that you can access any property of the schema field. For instance, you can set your own subtype property when defining fields, and then refer to that property in your string.html template.