How to extend LiveView Web with a Custom Card

LiveView Web is extensible in a number of ways.  One example of the ability to extend is to create custom visualizations, also called custom cards.  Once built and loaded into LiveView Web, the custom visualizations are available to end users along with the standard visualization types shipped with the product.  Users can chose the custom visualization type to display data inside the LiveView Web Page and Card framework.


 

The intent of the attached guide is to provide materials (including a step by step recipe that one could follow) to help users successfully customize TIBCO LiveView Web.  The document reviews one sample shipped with the product, and examines the level of encapsulation as well as the design patterns used there, in order for others to use this sample as a starting point for extending LiveView Web.  In this way, the document is intended as a reusable guide for best practices in building LiveView Web applications.  There is no intent to have the guide be an API reference or user guide for the API set.

Furthermore, the intent is to present a conceptual overview along with a summary outline of steps required to implement a custom visualization.  We will examine each file shipped in the sample in detail and discuss how it functions to produce the custom visualization.    From these, a custom visualization developer can extract and follow the necessary steps to produce their own custom visualization.

There is some attempt to give an overview of different nuances of the AnuglarJS (https://angularjs.org/) language; however, the intent is not to teach any of the language constructs.  In order to extend LiveView Web with custom visualizations, knowledge of both JavaScript and AngularJS is required.  Thus, it is assumed that the audience for the guide has those pre-requisites.

Attachments

wp-how-to-extend-liveview-web.pdf