Code Widget
The Code Widget AppBlock allows you to write or copy/paste code into the platform and your application will render that code inside the application. As a general rule, if your code renders in the mobile browser on your device, then it will work in this AppBlock. (Javascript, HTML, & CSS)
Here is an example widget for the MobileSmith Twitter feed:
<a class="twitter-timeline" href="https://twitter.com/TheMobileSmith" data-widget-id="619202306853216256">Tweets by @TheMobileSmith</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
To utilize this feature in your app, start by creating a Code Widget AppBlock.
Next, go to the Configuration page and you will see a large empty field - this is where the code goes.
Paste or type your code into the "Code Snippet" field. Click the green "Apply" button and you will see the widget displayed in the Preview box to the right of the code.
The final step is giving your app users a way to see the widget. You have two options:
- Set the Code Widget AppBlock as the target of a button, Menu List row, or Fly-out Menu row.
- Add an HTML Snippet tool and point it to the Code Widget AppBlock.
The Code Widget AppBlock allows you to write or copy/paste code into the platform and your application will render that code inside the application. As a general rule, if your code renders in the mobile browser on your device, then it will work in this AppBlock. (Javascript, HTML, & CSS)
Here is an example widget for the MobileSmith Twitter feed:
<a class="twitter-timeline" href="https://twitter.com/TheMobileSmith" data-widget-id="619202306853216256">Tweets by @TheMobileSmith</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
To utilize this feature in your app, start by creating a Code Widget AppBlock.
Next, go to the Configuration page and you will see a large empty field - this is where the code goes.
Paste or type your code into the "Code Snippet" field. Click the green "Apply" button and you will see the widget displayed in the Preview box to the right of the code.
The final step is giving your app users a way to see the widget. You have two options:
- Set the Code Widget AppBlock as the target of a button, Menu List row, or Fly-out Menu row.
- Add an HTML Snippet tool and point it to the Code Widget AppBlock.
Watch the short video below on how to create the HTML5 Code Widget AppBlock.