Using mule as a web server for submitting forms or creating HTML websites can be achieved easily with ‘Parse Template Connector’ and ajax.
To showcase the same, we’ll be looking at a POC which selects a random singer for you after selecting the decade.
You can access it at http://random-artist-selector.us-e2.cloudhub.io/
Objectives :
1. Index Page: serving static HTML pages to be used as a homepage.
2. Parse HTML response: Parsing response data once mule processes it.
3. Form Submission: Submitting user data (eg. feedback form)
Let’s look at these in detail:
1. Index Page:
For the initial homepage/index page, create an index.html page, and place it in the resources folder.
There are two ways to serve this page:
a. Either as a static resource for which you can use load static resource connector
Set the resource base path as : ${mule.home}/apps/${app.name}/Site/index.html
b. Use the parse template connector to query the index.html or homepage located in the resources folder. Parse Template Connector can be used to parse an HTML which contains ‘MEL’
Here the index page is being loaded using the ‘load static resource’ connector.
The HTML page can contain CSS links to external resources or javascript as this is parsed by the client/browser. I’ve added bootstrap to beautify the resulting page and make it more responsive.
Now, to send a request to the app, or to navigate to another page, ‘a tags’ and ‘buttons’ with href containing the URI can be used. You can check the dom of the web page with the inspect element to know more.
2. Parse HTML response:
In case of simple navigation and loading a second page, again either a ‘ load static resource’ or parse template connector can be used.
And if data processing is required, once it is processed by the app, it has to be served as a web page rather than a simple JSON output. So, to do that, we can place placeholders in the resulting HTML page which the parse template connector can replace.
Here, the artist name is placed as <h4>#[vars.artist]</h4> in the ‘result.html’. Once, the API returns a random artist, it is replaced with it by the parse template connector.
Another way to submit a request without having to navigate to another page is by using ajax.
Here, the get tracks functionality is implementing it:
<script>
function getTracks(){
// create a new xhr request element
var XHR = new XMLHttpRequest();
//add event listener for processing successful response
XHR.addEventListener( “load”, function(event) {
//replacing the dom element with response text
document.getElementById(‘resultBody’).outerHTML = event.target.responseText;
document.getElementById(‘resTable’).style.display = “block”;
document.getElementById(‘tbtn’).style.display = “none”
} );
//add event listener for error handling
XHR.addEventListener( “error”, function( event ) {
alert( ‘Oops! Something went wrong.’ );
} );
// Set up our request
XHR.open( “POST”, “/api/getTracks” );
// The data sent is what the user provided in the form
XHR.send();
}
</script>
#But, the api must send data in the form of html tags, so that it can be interpreted as a dom element.
%dw 2.0
output application/xml writeDeclaration=false
— -
tbody
: {
tr: payload.tracks map ((val,ind) -> {
th: ind as Number + 1,
td: a @(href: val.external_urls.spotify,target:”_blank”): val.name
})
}
Resulting Element:
<tbody>
<tr>
<th>1</th>
<td>
<a href=”https://open.spotify.com/track/6UkMcAA19lTdjs22jtB7o2" target=”_blank”>Big Yellow Taxi</a>
</td>
</tr>
<tr>
<th>2</th>
<td>
<a href=”https://open.spotify.com/track/7shVwhUdVbHpykOfbzvDc1" target=”_blank”>A Case of You</a>
</td>
</tr>
</tbody>
3. Form Submission:
If your HTML page contains many input fields, then it can be clubbed together under the form tag and data can be sent by using ajax and formdata elements.
// Bind the FormData object and the form element
const FD = new FormData( form );
// The data sent is what the user provided in the form
XHR.send( FD );
Xhr submits the form data with content type as ‘multipart/form-data’, and its data accessed as payload.parts.[name of the HTML form element].content.
Reference: https://apisero.com/
