Views and HTML

Quick question. If I have a user interface that is designed as a HTML Page how can I implement this design in a view and get the buttons, etc to function with code I write using App Builder ?

Hello John,

First of all, I hope you and yours are good. If I understand well (please, post here if I did not do it), the key is to use the HTML control. Inside the HTML control we can place almost any HTML markup that we want to use. One thing to note is that you no need (and probably it's not a good idea!) to place all the HTML of a page... that is... we don't need to copy the "html" and "body" tags, or link to other styles or script in the HTML control.

You can place in an HTML control the HTML markup that you need, and, then, set the right JavaScript code in order to be ready when some button in the HTML markup is pressed by the user. For example, just copy and paste the below code in an app view (App Builder automatically creates an HTML control with that HTML markup inside):

<button class="btn btn-primary" id="my-custom-button">Click here!</button>

Now, place the below JavaScript code in the app's view Show event:

$('#my-custom-button').unbind('click').on('click', function (event) { alert('You press my custom button!'); });

Now run the app, and, what you can see is a button, that you can press, and, therefore you can see the "alert" that we prepare. Well, this is what we can do, that is, you can place a button, but, also a lot of them if you need it, or any other HTML markup.

Note that the Bootstrap CSS framework is available by default, so you can use it, and, note also that jQuery is also available by default, so, again, you can use it, as you can see above. Take a look also at the "HTML" sample app, because, in addition to the referred stuff, we can also use the power of VueJS inside the HTML controls.

That's the idea, John. Now please, post here if you have any further question or need some specific help and I will try to help!

---