Build with rebase – building a front end using no-code techniques

Hello again, in this article I am hoping to show you how easy it is to create and link a HTML page to the Build with Rebase so that you can set up a front end for capturing data from users.

I have put a copy of this HTML page in the following github repository:

https://github.com/BuildwithRebase/SinglePageDemo

And the demo can be accessed here:

https://quizzical-bose-b2f4dc.netlify.app/

I have structured the build with rebase library so that it will look for two elements, one with id: rebaseLogin and one with id: rebase. The rebaseLogin element consists of a sign-in form that is designed to capture a users email and password for signing into the application. For the form to work the input and button elements on the form require a data-rebase-field and data-rebase-action data tags. These tags are pretty self explanatory and my code will look for the data-rebase-action=”login” being clicked to run the signin action.

    <main class="form-signin" id="rebaseLogin">
      <form class="rebase-login-form" data-rebase-next="podcasts.html" data-rebase-error="login-error">
        <img class="mb-4" src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72"
          height="57">
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
        <div class="alert alert-danger" role="alert" id="login-error" style="display: none">
          Unable to login please try again
        </div>
        <label for="inputEmail" class="visually-hidden">Email address</label>
        <input data-rebase-field="email" type="email" id="inputEmail" class="form-control" placeholder="Email address"
          required autofocus>
        <label for="inputPassword" class="visually-hidden">Password</label>
        <input data-rebase-field="password" type="password" id="inputPassword" class="form-control" placeholder="Password"
          required>
        <button data-rebase-action="login" class="w-100 btn btn-lg btn-primary" type="button">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
      </form>
    </main>

This block will render as follows and I can then log into the app to enter data.

The next step is to create an element with id=”rebase”

        <div id="rebase">
            <div class="container">
              <form class="row">
                <div class="form-group col">
                  <label>Task name</label>
                  <input type="text" data-rebase-field="TaskName">
                </div>
                <div class="form-group col">
                  <button type="button" data-rebase-action="tasks.default.new">Add</button>
                </div>
              </form>
            </div>

There are multiple elements underneath the rebase element which I will walk through.

The first is the data-rebase-action=”tasks.default.new” form. This form as the name suggests is used to create a new tasks entry in the database. The code is designed to look for any data-rebase-field element in the same form as the button and to send the values in that field to the database.

            <div class="rebase-control rebase-control-paging">
              <div data-rebase-paging="tasks.paging.top">
                <p>Showing {{recordStart}} to {{recordEnd}} of {{totalCount}} results</p>
              </div>
            </div>

Next the above block will add the top paging which will consist of showing records 1 to 10 of 20 etc. The key here is that I use a class (rebase-control rebase-control-paging) to pick up that this element is to be used for displaying a paging block.

The next block contains the code for the main table. Again the class (rebase-control rebase-control-table) is used to tell the rebase library that this is a table for display.

            <div class="rebase-control rebase-control-table">
            <table style="width:100%">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Task name</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr data-rebase-item="tasks" data-rebase-edit="inline">
                  <td data-rebase-id="{{id}}">
                    {{Id}}
                    <input type="hidden" data-rebase-field="id" value="{{id}}">
                  </id>
                  <td>
                    <span data-rebase-display="display" class="show">{{TaskName}}</span>
                    <!-- <input data-rebase-display="edit" type="text" data-rebase-field="task_name" value="{{task_name}}"> -->
                  </td>
                  <td style="width:100px">
                    <button data-rebase-id="{{Id}}" data-rebase-action="tasks.default.edit">Edit</button>
                    <button data-rebase-id="{{Id}}" data-rebase-action="tasks.default.delete">Delete</button>
                  </td>
                </tr>
              </tbody>
            </table>
            </div>

The key to the table is the data-rebase-item=”tasks” data tag. This tells the rebase libraries that this is a repeatable element to repeat for each task that is returned from contacting the server. The rebase libraries are designed to bring back up to 10 records at a time and to allow for paging through sets of 10 records.

Within the repeatable list we can output data using the moustache syntax {{TaskName}}. Each field that you define in the admin screens can then be displayed on the page.

You can also define Edit and Delete actions by adding a button with a data-rebase-id={{Id}} data tag and a data-rebase-action data tag ending in either edit or delete. The rebase libraries will call an edit or delete action with the relevant Id when a user clicks on the button.

The resulting page looks as follows (be nice I am a developer not a web designer :)).

Finally I have setup the rebase libraries so you can set up a Prev and Next button by adding the following HTML segment.

            <div class="rebase-control rebase-control-paging">
              <div data-rebase-paging="tasks.paging.bottom">
                <button data-rebase-action="tasks.paging.prev">Prev</button>
                <span>{{page}} of {{pages}}</span>
                <button data-rebase-action="tasks.paging.next">Next</button>
              </div>
            </div>

The rebase-control rebase-control-paging class is what I use to tell the libraries that this is a paging element. The data-rebase-paging=”tasks.paging.bottom” data tag lets the libraries know this is a paging element at bottom on the page. The rest is pretty self explanatory and this will then implement a nice looking paging element at the bottom of the page.

The following fields are available for paging:

  1. page: 1
  2. pageSize: 10
  3. pages: 0
  4. recordEnd: 0
  5. recordStart: 1
  6. totalCount: 0

Finally the edit form is rendered as a Bootstrap modal dialog

            <div class="rebase-control rebase-control-form">

              <!-- Modal -->
              <div class="modal fade" id="tasksEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div data-rebase-item="tasks.default.single">
                      <form>
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Edit Task</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                              <label for="taskName" class="form-label">Task name</label>
                              <input type="text" class="form-control" id="taskName" data-rebase-field="TaskName" value="{{TaskName}}">
                            </div>
                            <div class="mb-3">
                              <label for="taskStatus" class="form-label">Task status</label>
                              <input type="text" class="form-control" id="taskStatus" data-rebase-field="TaskStatus" value="{{TaskStatus}}">
                            </div>
                            <input type="hidden" data-rebase-field="Id" value="{{Id}}">
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="button" data-rebase-action="tasks.default.save" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>

I use the rebase-control rebase-control-form class tag to tell the rebase libraries that this is a form. I then inside the form specify data binding by using the value={{TaskName}} to set the value and data-rebase-field=”TaskName” to support reading the value and sending back to the server on save. Finally the data-rebase-action=”tasks.default.save” data tag tells my libraries that this is a button to save the data for this entry. I have set up the front end libraries in such a way that the libraries will retrieve a data entry prior to showing the modal form.

At the moment the rebase libraries are specifically set up to display a bootstrap modal but I will be adding support for Tailwind and Vanilla HTML/CSS/Javascript in the near future.

Leave a comment

Your email address will not be published. Required fields are marked *