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:
Code Block |
---|
<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.
Related articles
Filter by label (Content by label) | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Page Properties | ||
---|---|---|
| ||
|
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:
Code Block |
---|
<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.
View file name 42-HTML5 Code Widget AppBlock.mp4 height 250
Related articles
Filter by label (Content by label) | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Page Properties | |||
---|---|---|---|
| |||
|