how to use name above field

Onno Sloof 13 posts 84 karma points

Nov 17, 2017 @ 18:21

How to use Name above field?

Hi,

I want to have the name of a field above the field, instead of the label. At this moment both the label above the field and the placeholder inside the field use the label value as in screenshot below.

enter image description here

Copy Link

Nicholas Westby 2054 posts 7104 karma points c-trib

Nov 17, 2017 @ 21:24

If you want to create a pull request, we can talk about a more robust solution. However, if you want the quick solution, here it is.

Edit this file: https://github.com/rhythmagency/formulate/blob/96620f209c8e8132e2b6826e0c1d71080cb325b4/src/Website/Views/Partials/Formulate/Responsive.Bootstrap.Angular.cshtml#L156

Around that line so that it outputs both label and name.

For the next part, you have two options.

Option 1: Custom Frontend Build

Edit this file: https://github.com/rhythmagency/formulate/blob/96620f209c8e8132e2b6826e0c1d71080cb325b4/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/services/field-type.js#L13

So that instead of setting the label to the value of field.label, you set it to the value of field.name.

You'll then have to create a custom build of the JavaScript.

Option 2: Custom Fields

Customize any fields you'd like (e.g., the text field in your screenshot) following these instructions: http://www.formulate.rocks/articles/custom-field-types

That allows you to use any markup you like without modifying the core of Formulate, because you can override the display of the core field types in Formulate. The downside is that you have to do that for every field you want to modify the label for.

Bonus Option

If you really wanted, you could create custom field types that use any data you want in any way you want. That same link I mentioned above has info about this: http://www.formulate.rocks/articles/custom-field-types

Copy Link

Onno Sloof 13 posts 84 karma points

Nov 18, 2017 @ 11:00

Hi Nicholas,

Thanks for your reply.

In my local project, where I installed Formulate by Nuget, I changed Responsive.Bootstrap.Angular.cshtml like: enter image description here

Then I changed the field-type.js file, also in my local project. enter image description here

But still the text above the field is the same as the text as placeholder in the field.

Copy Link

Nicholas Westby 2054 posts 7104 karma points c-trib

Nov 18, 2017 @ 11:06

Like I mentioned, if you choose that approach you'll need to create a custom build of the JavaScript, which you can read about here: https://github.com/rhythmagency/formulate#building

The reason this is necessary is because that is one of many JavaScript files (Formulate JavaScript files are built in a modular manner). The build process combines them into a single file.

Though I don't particularly recommend this approach, because any upgrade to Formulate or a NuGet package restore may overwrite your JavaScript file (though, you can always rename the JavaScript file to avoid that overwriting possibility). And that may discourage you from getting future updates to Formulate.

Copy Link

Anthony Edge 26 posts 90 karma points

May 07, 2019 @ 03:45