Using Alpine-Tools is simple. Just paste in a csv list or the fields from a Javascript object, a C# class, or a Java class constructor and hit "Go."
A table will show all the fields, which you can then simply map them to a standard HTML element.
Note: The table rows are drag and drop. You can change the order of the HTML element by arranging the order of the table rows before generating the HTML elements.
For each row in the table, select the input type for the HTML element. Change the label text if needed.
The "Req" checkbox makes the element a required field.
The "Label" checkbox will add or remove the label element.
Note: This helper generates Bootstrap-ready HTML markup, similar to the Bootstrap Forms example and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Sample data formats include:
Comma Separated Values
Field1, Field2, Field3, Field4
C# Class File
public string CustomerId { get; set; }
public string CustomerCommon { get; set; }
public string CustomerAddress { get; set; }
public string CustomerCity { get; set; }
public string CustomerState { get; set; }
public string CustomerZip { get; set; }
public string CustomerEmail { get; set; }
Javascript Objects
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// or
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
Javascript Class Constructors
this.name = name;
this.surname = surname;
A Java Class constructor
gear = startGear;
cadence = startCadence;
speed = startSpeed;
Checking the "HtmlEncode" stops the elements from rendering in the browser and generates HTML code to copy/paste.
Once the HTML elements are generated, simply copy/paste the generated nodes into VSCode and wire them up.
Note: If the input type for a node is not selected, nothing will be generated for that table row.
Note: If you only have one field to generate, just type it in and add a comma after it (e.g. Field1,).
Note: No user input is saved in any way.
Alpine-tools is designed to generate code to around 90% completion. It does require including some scripts and a few vanilla javascript functions to the page. The the most important include, of course, is Alpine.js. If form validation is required, then include Pristine.js. Fetch API calls are using the js api interface, linked in the references below. It's wired to use Alpine.js Toast notifications for ajax failures. There is a working Codepen.io example, also in the references.
The code completion ratio is higher with a simple form of textboxes and a submit button. Adding a select element "dropdown" list will require slightly more configuration, depending on how the select element options will be populated.
If an input of type="button" is generated, an Alpine.js @click event calling the function "postFormData()" is automatically created. This may be deleted if not needed, or changed to call another function. At this point, a form should post correctly to an endpoint by simply giving it a correct url to the endpoint (and correctly configuring the endpoint).
If multiple select "dropdown" lists are required, it's going to take a little more manual editing to wire them up. There are too many unknowns in the process to complete 100% of the code required in multiple select lists. This will, however, stub everything out and still cut down on a lot of typing.
Post cleanup. If a select "dropdown" list element is added, it is prewired to use some sample options included in the Alpine.data component. Delete this if it is not needed. If you are fetching the options from an api, remove the sample options to create an empty array. Then fetch the option list and set the empty array to the fetched object array. There is an option to include a "fetch selectOptions" function to the data component. This can be utilized, or code your own. Obviously, if multiple select input elements are included in a form, they probably won't all use the same "selectOptions" array. This will have to be completed manually.
There is a minimal amount of CSS required for everything to function out of the box. Pristine.js requires around 12 lines of CSS. Alpine.js Toast notifications require Tailwind. For the sake of simplicity, a template file with the extracted Tailwind CSS is included in the references below in simple style tags. They can be moved to a separate file if desired. The generated elements use Bootstrap form classes.
While it seems that using CDN includes has fallen out of favor, for simplicity's sake the provided minimal Alpine-tools template is using CDNs. In production, the required libraries can be included in your preferred manner. The goal in all of this was not to show off high-level code, but to produce fully working input forms as quickly as possible, with as minimal amount of manual coding as possible.
Note: Always make sure that any data displayed comes from a trusted source or is properly sanitized.
References:
- Awesome JS API interface using Fetch In less than 50 lines.
- Bootstrap 5 Forms Overview.
- Alpine.js Toast Notifications Working Codepen.io Example.
- Form validation with Pristine.js Vanilla javascript form validation micro-library.
- Minimal Alpine-tools template file Alpine-template.zip.