Due to the limitations of the Community, there are occasional reasons to consider using advanced Javascript frameworks in a Community component.ftl such as AngularJS, Angular, React JS, and Vue JS. These give us the ability to, for example (see the AngularJS section), create a page that allows users to filter by more than one label at a time.
See each section for instructions of how to embed it (or not) into the Community using custom components and endpoints, etc.
Angular JS
Certain OOTB functionality is already in AngularJS:
- Tiled content (Blog category page)
- Certain titles (in the header)
And the Lingotek (Lilicon) Translation functionality is written in AngularJS.
Because it's already used OOTB, AngularJS can be added to a component by adding the script as shown:
liaAddScript angular="true"> ;(function (angular){
// SCRIPT HERE
})(LITHIUM.angular);
and making sure that the app target ID includes "ng-controller" and "li-bindable='true'" like so:
<div ng-controller = "jmpCtrl" li-bindable = "true" id = "jmpng">
<-- HTML and app components go HERE -->
</div>
You can see a custom AngularJS app in action at https://community-stage.jmp.com/t5/angular-test/bd-p/angular-test using the following Community component and endpoint files:
- /components/jmp.FilterSelector.ftl
- /components/jmp.FilterSelector.css
- /components/jmp.FilterSelectorScript.ftl
- /endpoints/filter-by-labels-and-tags.ftl
- /controllers/filter-by-labels-and-tags.ftl
Angular
I have so far been unable to embed an Angular (2+) app in the community but am continuing to try.
React JS
React and Vue are simple to embed on a page via a component.ftl, though there are slight differences in the output file names and quantity.
1. Simply build the distribution version of the app via the CLI command:
npm run build
This creates several *.js and *.css files, along with an index.html file and some *.map files, which you'll ignore.
2. Copy the main.js and main.css files to the Community /html/assets folder (or a subfolder if you prefer).
3. Copy the copy the <script> tags in the index.html file and paste them into the component.ftl you created but with the correct path to the /html/assets/* folder you moved the files to.
4. Create <style> tags and import the url of the css file
5. Include the div#root element.
When you're done, you should have something similar to this:
<style>
@import url('/html/assets/a-react-main.1e80f07a.css');
</style>
<div id = "root"></div>
<script type = "text/javascript" src = "/html/assets/a-react-main.788f5a0c.js"></script>
Upload the SDK to Stage and test.
For an example, see a-react.ftl on custom page https://community-stage.jmp.com/t5/custom/page/page-id/a-react-test
Vue JS
The instructions for Vue JS are the same as for React JS, with the exception of the different filenames and one more file you'll need to copy and reference. Compare this a-vue.ftl component to a-react.ftl:
<style>
@import '/html/assets/a-vue-app.1072ac02.css';
</style>
<script src = /html/assets/a-vue-chunk-vendors.b0ada6ef.js></script>
<script src = /html/assets/a-vue-app.62c8463e.js></script>
<div id = "app"></div>
