UPTEC F15 034 Examensarbete 30 hp 16 Juni 2015 An Asynchronous Meta-Data Driven Web UI for Pricing of Structured Products Anders Lindström Abstract An Asynchronous Meta-Data Driven Web UI for Pricing of Structured Products Anders Lindström Teknisk- naturvetenskaplig fakultet UTH-enheten In the process of building maintainable and customizable software used and displayed in different mediums, a user interface (UI) that is auto-generated from meta-data can Besöksadress: be built. That way minimal effort can be made when customizing the software. This Ångströmlaboratoriet Lägerhyddsvägen 1 thesis took place at the financial software company SunGard. Traders have requested Hus 4, Plan 0 a web based solution to one of SunGard's financial softwares, and will be used for managing structured products. The solution had to work with some already defined Postadress: web and server components that SunGard is using. The web tool used for making a Box 536 751 21 Uppsala prototype and evaluating the suitability was AngularJS. As a result it was found that it was possible to create a meta-data driven UI. Some programmatic design issues when Telefon: generating the UI are discussed. 018 – 471 30 03 Telefax: 018 – 471 30 00 Hemsida: http://www.teknat.uu.se/student Handledare: Anders Möller Ämnesgranskare: Josef Höök Examinator: Tomas Nyberg ISSN: 1401-5757, UPTEC F15 034 Popul¨arvetenskaplig Sammanfattning Det h¨arexamensarbetet beskriver uppbyggnaden av ett grafiskt webbgr¨anssnitt f¨oratt prisa strukturerade produkter. Komponenterna som ska visas i webbgr¨anssnittetinnehar sj¨alvbeskrivande information, s˚akallat meta-data, som bland annat beskriver hur komponenten ska visas. Exempel p˚ameta- data ¨arkomponentens titel och dom¨an(flyttal, lista, datum etc.). Den sj¨alvbeskrivande informationen g¨ordet m¨ojlighetatt automatisera skapan- det av gr¨anssnittet.Arbetet tog plats p˚af¨oretagetSunGard, ett f¨oretagsom bland annat utvecklar finansiella mjukvaror f¨orbanker. Mjukvaran detta ex- amensarbete har arbetat med ¨arFront Arena. N¨arman bygger en mjukvara med grafiskt gr¨anssnittkr¨avsdet ofta att man l¨aggertid och arbete p˚aatt modifiera det grafiska gr¨anssnittetd˚a¨andringar och utbyggnader av mjukvaran sker. Som ett steg i riktningen mot att utveckla flexibel mjukvara har SunGard skapat ett ramverk kallat Deal- Package f¨oratt programmatiskt definiera strukturerade produkter i Front Arena. I ramverket specificerar man meta-data som kan anv¨andas till att autogenerera ett grafiskt gr¨anssnitt,vilket ¨arimplementerat i Front Arena. Handlare har nu efterfr˚agatm¨ojlighetentill att ¨aven autogenerera grafiska gr¨anssnittp˚awebben. Ramverket som testats och diskuterats i detta ex- amensarbete har varit AngularJS, ett JavaScript-baserat ramverk utveck- lat av Google. I rapporten beskrivs uppbyggnaden SunGards programma- tiska anv¨andargr¨anssnittDealPackage och implementationen p˚awebben. D¨arefterdiskuteras varf¨orAngularJS inte ¨aroptimalt f¨ordenna uppgift, dock fullt m¨ojligtatt anv¨anda,samt vilka problem som st¨ottsp˚aunder v¨agen. Contents 1 Introduction 1 1.1 SunGard . .1 1.2 Purpose . .4 1.3 Limitations . .4 1.4 Problem Definition . .4 2 Meta-Data Objects 5 2.1 Variable Dependencies . .5 2.2 Meta-Data . .6 2.3 Modification . .7 3 Front Arena DealPackage 8 4 Front Arena - Browser 8 4.1 PACE . .8 4.2 Browser to PACE . .9 5 A Structured Product 11 5.1 Bond . 12 5.2 Put Option . 12 5.3 Reverse Convertible Note . 14 6 Defining an RCN using DealPackage 15 7 Building a Prototype with AngularJS 18 7.1 Overview of Final Prototype . 18 7.2 Index Page . 20 7.3 Factory: DealPackageService . 21 7.4 Service: faProductGeneral . 23 7.5 Directive: faInput . 25 8 Discussion 29 8.1 Placement of Directive Logic . 29 8.2 Angular's $filter-service . 30 8.3 The Absence of a Standard onChange . 31 9 Conclusion 31 9.1 Further work . 31 1 INTRODUCTION 1 Introduction The scope of this thesis is to look into how a meta-data driven user inter- face (UI) on the web can be built using AngularJS[1]. It took place at the financial software company SunGard[2] in Stockholm. They are providers of a financial software called Front Arena[3], which is a software with a large variety of financial services where one of them is structured products. 1.1 SunGard SunGard is a leading global provider of financial software. They build sys- tems for financial trading, risk management and position control. Their system enable banks, hedge funds and other financial institutions to make critical decisions with confidence, execute their orders and follow up their positions. They make solutions independent of what asset class that is being traded, and their product takes care of the whole process from sell-side to buy-side. A structured product in Front Arena is assembled by first creating each individual component of the structured product, for example a bond and an option as in figure 1 and 2, and then adding them to a combination instru- ment to be traded with customers, as in figure 3. One of the problems when trading structured products this way in Front Arena is that the traders are subject to operational risks. For example if the currency of the structured product is to be changed, the trader is re- sponsible for changing the currency on all components of the structured products and the combination, hence the trader might accidentally end up having diverging currencies on the components. Due to these operational risks banks may choose other systems to sell structured products. In 2013 SunGard implemented a new feature called DealPackage in Front Arena to reduce the operational risks. DealPackage is an application pro- gramming interface (API) that allows users of Front Arena to build struc- tured products in a more intuitive way than before possible. Common fields can be defined so that the trader can be sure that for example the curren- cies are the same for all components of the structured product at all times, leading to greatly reduced operational risk. 1 1 INTRODUCTION Figure 1: UI to create a bond instrument in Front Arena, where the trader can define issuer, currency, rate etc. Figure 2: UI to create an option instrument in Front Arena, where the trader can define underlying, currency, contract size etc. 2 1 INTRODUCTION Figure 3: The combination instrument where a bond and an option has been added. In the upper part the trader can define contract currency, issuer, contract size etc. The lower part is where the trade information is entered. There are no connection between the fields in the combination and the fields in the components of the combination, so changing currency on the combination for example will not affect neither the bond nor the option. On top of this new DealPackage API, SunGard has built support for au- tomatic UI generation within Front Arena. This enables traders to handle their structured product in one single GUI, which greatly enhances the work flow for the trader. Now there is an ambition to extend the support for dis- playing and building these structured products by making it possible to auto-generate UI's on the web in addition to the UI support available today. 3 1 INTRODUCTION The web tool of interest is the JavaScript-based framework AngularJS. Sun- Gard wants to know if AngularJS is a suitable choice for building a meta- data driven UI web application that can work together with their server components. 1.2 Purpose Traders have requested a web based solution where parts of the complexity of the full software Front Arena can be bypassed, yet maintaining the power of this new DealPackage API. The purpose of this thesis is to evaluate if the JavaScript-based AngularJS framework is suitable for auto-generating a web UI from meta-data and managing changes to the structured product. 1.3 Limitations These are the limitations defined for this thesis: • SunGard is interested in evaluating AngularJS, and although there are many competitors, only AngularJS is considered. This implies that JavaScript and jQuery[4] are used. • SunGard has DealPackage already set up and working in their soft- ware. For this reason, solutions in this thesis have to work with this API in order to build the meta-data driven web UI. • Due to time limitations the main focus is on the client side of the solution, i.e. the browser. • A mock-up is built to test the functionality of AngularJS. This result is presented and discussed. There is still lots of work to be done in the back-end of the application before it will be possible to make a fully functional application. 1.4 Problem Definition The result and reflections are based on my own experiences when learn- ing and using JavaScript, jQuery and AngularJS. The questions that I will answer and discuss in this thesis are: • Is AngularJS a good tool given the problem description? • What should be kept in mind when working with AngularJS? • In what ways are AngularJS not suitable for this particular task? 4 2 META-DATA OBJECTS 2 Meta-Data Objects A meta-data driven UI can be used in many different domains. For this reason, a general introduction to meta-data objects, that has nothing to do with financial products, will be explained in this section. The financial products can be seen as a specific application to this general explanation. This will be the foundation from where the specific case of SunGard will begin. Let A, B and C be building components used to construct objects. The components could be bicycle parts and the object is the components put to- gether, i.e. the bicycle. Each of these components has different attributes, these could be the diameter of the tire, material for the handlebar etc.