Using Erlang Nitrogen and Bootstrap 4 Templates

Question

Is there a way to allow bootstrap 4 designed web pages (as Nitrogen templates) to "interact" with Erlang Nitrogen?

Apart from breaking out all input fields, buttons and forms and converting it to Nitrogen, is it possible to leave the designed HTML pages intact and add tags to tell nitrogen to do the postback event on a button when rendering, or access the content of a field?

This is the designed bootstrap code for instance, and I would like to have the postback be handled by Nitrogen. (All the required javascript and css is included in the page, and the web page is the template of the Nitrogen module called).

<form class="form-horizontal m-t-20 " id="loginform" name="loginform" method="POST" action="#">
  <div class="input-group mb-3 ">
    <div class="input-group-prepend ">
      <span class="input-group-text " id="basic-addon1 "><i class="ti-user "></i></span>
    </div>
    <input type="text " class="form-control form-control-lg " placeholder="Username " aria-label="Username " aria-describedby="basic-addon1 " id="login_username">
  </div>
  <div class="form-group text-center ">
    <div class="col-xs-12 p-b-20 ">
      <button class="btn btn-block btn-lg btn-info " type="submit" postback=login>Log In</button>
    </div>
  </div>

chops · Answer 1 · 2020-11-26T17:56:34.633

This is an interesting idea. It's possible to achieve this with minimal changes.

Using your original code, any form elements that you want to be captured in a postback would have to have to the class wfid_ELEMENT_ID.

For example:

<input type="text"
       class="form-control form-control-lg wfid_login_username" 
       placeholder="Username"
       aria-label="Username"
       aria-describedby="basic-addon1"
       id="login_username">

(note wfid_login_username in the class).

Also, the <form> element will be outright ignored by Nitrogen (at current, anyway), so it can safely be removed.

Then to do the postback, you have two options:

The traditional way in Nitrogen: wf:wire(button_id, #event{type=click, postback=login}), or
Use the #api action, with some javascript which should allow you to get away with using a postback HTML attribute:

First, wire the #api action (API Docs: https://nitrogenproject.com/doc/action_api.md)

wf:wire(#api{name=myapi}).

Then, use javascript to scan the DOM for postback=SOMETHING and wire the related page.myapi call.

$('[postback]').each(function(i, e) {
    var pb = $(e).attr("postback");
    $(e).on("click", function() { page.myapi(pb) });
});

Finally, build the handler function for your api:

api_event(myapi, _, PostbackString) ->
    wf:wire(#alert{text=wf:f("Your postback was: ~p", [PostbackString])}).

Of course, by doing this, you lose a lot of the capabilities of postbacks, since the postback can safely wrap up complex terms like tuples, maps, etc - this method would literally postback just the string attached to the postback HTML attribute. But it should work for simple interfaces like this.

Using Erlang Nitrogen and Bootstrap 4 Templates

1 Answers1