This project aims to enhance the current SITS Tasking offering to aid in the creation of simple single page applications. I chose the react framework as unlike other client side frameworks such as Angular, it only concerns itself with rendering the application state. The motivations for this project were to create a highly re-usable component based framework to enable the rapid application of SITS solutions whilst providing consistency, testability and a modern user experience.
- A SITS environment (preferably not production)
- An e:Vision environment
- A license for SITS tasking (SV202)
- A solid grasp of SITS tasking and SRL development
- Knowledge of latest javascript development techniques (es6/node)
- Knowledge of the React/Redux frameworks
- Perseverance
This solution utilises the React and Redux libraries to render a single page client side application to the end user. The client interacts with the SITS application via multiple hidden inputs and buttons which have been created utilising standard SITS components (TTE, TTQ, TEC, TCR).
An example is provided in the xpc subdirectory ./xpc/sits-example.xpc. Import the contents of this file into SITS and create a container option link to the task 'REACT-PROTO' to see the demo in action. Run compiled react application locally using the comment 'npm run start'.
The example sets the value of the SLP 'REACT-PROTO' asynchronously - using redux to manage the state of the SLP. This is overkill for a single value but becomes very useful when managing many different values and entities (see ReactModuleTest for an example).
Create a SIW_YGSL link on the page to an SRL which contains a json object of your state. Mark this with the data attribute [data-get-state] - the redux shared actions will now be able to automatically retrieve the new state (which will be verified when you perform asynchronous updates on data).
Create a button ttq (and the necessary TEC, TCR records) to update fields à la standard tasking. Mark this in some way using data attributes (in the example value action this is [data-value-button]). When you are ready to fire the ajax call, call the function triggerAsync() and pass in this identifier: triggerAsync('[data-value-button]')