Comment on page
Basic View Helpers

The Jasper::Helpers library provides a common set of helper methods that can simplify the development of the views.
Links
A link_to helper is available:
== link_to "Home", "/"
Produces the following HTML
<a href="/">Home</a>
Buttons
A button_to helper is available:
== button_to "Logout", "/logout"
Produces the following HTML
<form action="/logout" class="button" method="post">
  <button type="submit">Logout</button>
</form>
For more complex forms, see section below.
Forms
The form helpers listed below are very basic helpers that are included by default. For a more complete form building experience we strongly recommend using FormBuilder.cr​
The following methods provide simple HTML form elements:
form
text_field
label
hidden_field
select_field
text_area
check_box
submit
Use amber generate scaffold [Resource] [field:type] ... to get the most up-to-date examples of using helpers for resources.
form
== form(action: "/posts", method: :post) do
  == csrf_tag
  == submit("Create Post")
​
/ When using `method: :patch`, it add the hidden '_method' field for you
== form(action: "/posts", method: :patch) do
  == csrf_tag
  == submit("Update Post")
Produces the following HTML
<form action="/posts" method="post">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />
  <input type="submit" value="Create Post" id="create_post">
</form>
​
<form action="/posts" method="post">
  <input type="hidden" name="_method" id="_method" value="patch">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />
  <input type="submit" value="Update Post" id="update_post">
</form>
text_field
== text_field name: "title", value: "", placeholder: "Title"
Produces the following HTML
<input type="text" name="title" id="title" value="" placeholder="Title">
label
== label :title
Produces the following HTML
<label for="title" id="title_label">Title</label>
text_area
== text_area name: "body", content: "", placeholder: "Body", size: "30x10"
Produces the following HTML
<textarea name="body" id="body" placeholder="Body" cols="30" rows="10"></textarea>
hidden_field
== hidden_field name: "secret", content: "Super Secret"
Produces the following HTML
<input type="hidden" name="secret" id="secret" content="Super Secret">
select_field
/ Array of Arrays
== select_field name: "ranking", collection: [[1, "First"], [2, "Second"]], selected: 1
​
/ Array of Hashes
== select_field name: "ranking", collection: [{ 1 => "First" }, { 2 => "Second" }], selected: 1
​
/ Hash
== select_field name: "ranking", collection: { 1 => "First", 2 => "Second" }, selected: 1
All the previous code samples produce the following HTML
<select name="ranking">
  <option value="1" selected="selected">First</option>
  <option value="2">Second</option>
</select>
check_box
== check_box(:published, checked: false)
Produces the following HTML
<input type="checkbox" name="published" id="published" value="1" checked="false">
All together
== form(action: "/posts", method: :post) do
  == csrf_tag
​
  == hidden_field name: "secret", content: "Super Secret"
​
  == label :title
  == text_field name: "title", value: "", placeholder: "Title"
​
  == label :body
  == text_area name: "body", content: "", placeholder: "Body", size: "30x10"
​
  == label :ranking
  == select_field name: "ranking", collection: [[1, "First"], [2, "Second"]], selected: 1
​
  == label(:published)
  == check_box(:published, checked: false)
​
  == submit("Create Post")
Produces the following HTML
<form action="/posts" method="post">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />
​
  <input type="hidden" name="secret" id="secret" content="Super Secret">
​
  <label for="title" id="title_label">Title</label>
  <input type="text" name="title" id="title" value="" placeholder="Title">
​
  <label for="body" id="body_label">Body</label>
  <textarea name="body" id="body" placeholder="Body" cols="30" rows="10"></textarea>
​
  <label for="ranking" id="ranking_label">Ranking</label>
  <select name="ranking">
    <option value="1" selected="selected">First</option>
    <option value="2">Second</option>
  </select>
​
  <label for="published" id="published_label">Published</label>
  <input type="hidden" name="published" id="published" value="0"><input type="checkbox" name="published" id="published" value="1" checked="false">
  <input type="submit" value="Create Post" id="create_post">
</form>
Views
Form Builder
Last modified 8mo ago