DerivHack2019 2/3: Section C - Creating reporting UIs

Captions as YouTube publishes them, usually machine-generated, so names such as Daml and Canton can be misheard.

1. 0:00

   great so we have arrived at the last section of our webinar which is about you is and how you can build reporting your eyes so I'm going to show you a template basically that you can use to create simple reports and also some simple interaction with the ledger this is really meant to be sort of a bit of boilerplate code that saves you writing some of the more infrastructure related

2. 0:38

   stuff so it's a template for a react application and JavaScript react application and it has the most basic functionality of displaying contracts that are on the ledger in a tabular format and then providing ways to to exercise choices on these contracts so I'm first going to show you sort of the UI itself and how it looks and then we'll go into how it's how it's built and how you can modify it so it presents you with a very simple login

3. 1:12

   screen where you can log in as a party and you'll have to configure those parties so I'm going to log in as Alice and just to mention I've beforehand here started up the sandbox and JSON API is the same as luciana has just shown and I've ran a modified version of the Python script that just populates a couple of contracts on the ledger so that we have actually something to look

4. 1:43

   at yeah so I would before I start to to actually log in I'll have to start up the UI so that's I'm now in this UI subdirectory of the hello CDN example and you would usually do a yarn install first and after that you can simply do a yarn start that assumes that you have the yarn to installed and you can there's a link on in our readme to how you can download and install that - just to mention if you're not familiar with JavaScript or react this might all be sort of a bit

5. 2:24

   complex at first but I'll try to point out the parts which you can take and modify even without sort of deep knowledge of a video of the two so let's start for the server to come up all right that seems tough what so now let's login this Alice and what you see here is a basic very basic screen it shows the user that I'm logged into I can log out again it has these two tabs the first

6. 2:56

   one is kind of a default contract view it just shows you the module of the contract the template that we're showing the contract ID and it has this jason explorable jason tree or you can drill down and actually look at the data that's on the contract so that's you you just want to explore arbitrary contracts it will show all types of contract and have this is generic Explorer here on the second tab which I've called report here you can see that

7. 3:40

   we are displaying some more detailed information here so it's the same set of contracts we're pulling out specific fields to display in the various columns so here for example we we display the identifier it was already mentioned by my colleagues and the version we display a payment amount currency higher and the receiver but you can also see here is a a very simplistic way to exercise this

8. 4:12

   say hello choice so it just has an input form here where you can type in the greeting you want to use so you can say for example hello world and what if noticed here once I press return return this would actually have exercised the choice and then queried the contracts again from the ledger which you can see down here where the the updated contract is shown so it got a new contract ID

9. 4:47

   it's got the modified identifier and diversion is increased by one so yeah this would allow you for example if you have a classical propose accept header and then you could you know put the acceptance here and let people interact with the letter that way that's really all that we we provide here in front there is a bit of boilerplate code behind that but I think you can see how this allows you to start modifying that

10. 5:21

    template to your to your needs add new reports and different ways of interaction okay so let's look at the code that's required to build it so as mentioned you can find this all of this in the UI subfolder of the repository that we linked to and the first thing that I want to show you is the configuration file that's where you have to specify the parties that you allow to log in so there's no you know security

11. 6:00

    around this it's really meant as a development type of UI you simply list the parties that you want to make available here and it will generate the JWT tokens automatically the ones that you've seen in the piping program before and one side note that once you want to work against a deployed version of your thermal model so against the cloud hosted double you will be provided with those access tokens by the double homepage so you will need to copy them

12. 6:38

    in here for this to work okay so first of all how do we get the data out of the out of the ledger and into our react application we're using here something called react contexts which is a way to provide sort of global information to your different components and the implementation of that is not really relevant for for you as you probably don't need to modify it but what it essentially does is it provides you with a ledger state that you can then use in

13. 7:19

    your in your components and in the reports that you create it also provides these two essential functions one is to send commands to the ledger and you can see the for relevant lines here which which basically build up the requests with the correct authorization header and then issue this post request to the to the command end point now this is plain JavaScript using you know the

14. 7:50

    the fetch API that's available in most browsers so if you were to decide for a completely different UI framework or so or just want to do plain HTML Javascript you can still use these lines as a way to to send commands to the ledger in the same way there is a function to fetch contracts from the ledger and here you can see we just checked that there is a token available and then again these

15. 8:18

    three lines playing JavaScript are what you need to fetch the data so these could be also used in different contexts what it does here is basically it reads out the individual contracts and then dispatches this action that updates the state so that the context that we are passing around to all of our components the next thing I want to show is you is show you is this is the generic contracts component so that's a

16. 8:52

    component that you can use in your custom reports or extend with more features so that component is one that you can instantiate with a list of contracts and optionally with some columns and actions along with it and the implementation here is probably also not so much of relevance essentially what it does it it builds up a table using these contracts down here and then adds depending whether you have specified custom columns or whether we

17. 9:27

    specified actions it would add columns with with buttons as well but in the simplest possible case when you just provide it with some data so with some contracts here and don't provide anything that will result in the in the default view that I showed you earlier and you can see this in the default implementation which is actually now trivial so what you do here is you get the letter state using using the used

18. 10:02

    letter state function and then there is a helper function also defined in this module that lets you basically filter your contracts by a given module name and template name so that will give me all the transfers and then simply pass the transfers into this contracts component and we it will result in the in the default view where we have this generic Explorer component now as I've mentioned we can sort of customized this contracts view and

19. 10:41

    that's what's done in the report page so what we do here is a tiny bit more complex we still get our letter state here and obviously still get all the transfers and we pass them to the contracts component but what we specify additionally is the columns that we want to display and this takes a somewhat generic format that we say this is the column name and this is the field that I want to pull out off of the contract and

20. 11:15

    here we support this sort of combined path expression we simply say I want to get this field and this we can go into deeply nested structures you can even go into array elements here until you finally find the value that you want and it's just to simplify working with the highly nested CDM data structures as you can see these expressions are quite long but what what it ultimately allows you

21. 11:44

    to do is have this nice concise view of fields that are deep within the senior message addition to that you can if if you want to have some form of interaction on the contracts in the table you can add these actions array where basically you say I want to support this action let's say hello action when the user clicks it I want to call this function and this function is defined up here and this is

22. 12:19

    a way to say I want to have an additional parameter to that choice called home to greet which will get passed into the exercise choice function so the exercise stress function which function will then be called with the contract so the allowing basically the contract in the line that you pick the button and with the argument that the user entered now the the additional argument here is optional so if you just want to have a button that for example exercises a

23. 12:51

    choice that doesn't take any parameter for example in an accept choice on a proposal you could just leave that out and you wouldn't get the text field for additional input and here in the X choice function all I really do is I build up my command object specifying the template ID contact that idea that I want to exercise the choice on the choice name the argument which has a single parameter here come to greet so

24. 13:33

    that really corresponds to the parameter of the choice that you've seen in demo and then I specify this time parameter which legitimate to be concerned what I didn't do is I sent a command and I wait until the command is accepted and I immediately refetch the contract which is what makes this look sort of very responsive so I type in something then you don't notice it immediately gets updated because we research the

25. 14:10

    contracts of course if want to do anything else when when a user clicks a button for example you could think about navigating to a detailed view of that particular contract you can do that as well there's no reason why this function couldn't do anything else then and exercising a choice it will always get passed in the contract information so that you have that available with whatever you want to

26. 14:44

    do all right what's left you say if you want to now extend this application there is a couple of ways for example you might want to add new new tabs here for this you would want to look into the sidebar component it simply has a list of this sidebar link and as you can see you specify the label to display and then the path where you want it to navigate and you'll have to make sure that under this path you'll have a page a corresponding page here defined and

27. 15:29

    then this will just work similarly you could think about extending the header so that's basically the part on top of here currently we just have the logout button and we have a button that will refresh your contracts on the ledger if you want to do that sort of on-demand and you could add additional buttons here anything really that you want you would simply add it to the list of components

28. 16:00

    here so for example here you have the the refresh button which called fetch contracts or the signup button which signs out the user right so that's really all I want you to show it's the relevant parts of the JavaScript project and that's mentioned for force for simple things it should be enough to sort of take take the example and modify it accordingly if you're not familiar with JavaScript at all we do have another

29. 16:40

    example in the repository that that shows you how you can also use Python notebooks in case you're familiar with that and you know build reports by abet so that's for more for users that would rather use is Python yep and otherwise let us know if there are any questions around that have there been any questions in there so I don't think we have any outstanding questions at the moment I just want to check with our guys in our hosts in New York are we okay to talk a bit more do we need to

30. 17:27

    stop the recording we have a couple more minutes okay I saw a question that I think Levent answered is that something you'd like to share the implicit e of Dan'l to the use cases to more like business to client use cases and I commented that obviously you know for the CDM hackathon and is done this is all gonna be b2b however tools like dabble are are definitely meant to adjust both of those use cases so particularly where parties might be

31. 18:14

    individual users rather than entities or okay I also receive one question I answered earlier the question was can we integrate Java applications with a ledger and if you go to our official documentation website you'll see that we do provide a Java API and however for this particular then we're not supporting that because it's not something we can host on the inner cloud platform so I think that's

32. 18:57

    it I don't know if hosting New York want to make a final announcement think about the next event yeah before that maybe just I wanted to briefly make some closing remarks so just as a sort of a quick guidance for the hackathon itself I think as a team what you should try to do is is really showcase sort of the dominant DLC features that you're working out in your solution so the

33. 19:30

    privacy aspects the aspects of having also the right authorization on your contract this is not easy to show on our on a report itself so you might want to think about showing some some code or so the second thing is you know try to differentiate yourself you can imagine if all the tunnel teams now basically show the exact same reporting UI that I've just shown you might not stick out from the from the crowd so try to be

34. 20:05

    creative and do something new I would also sort of strongly advise you to solve the first couple of use cases that you get up front that you solved them before the hackathon or at least try try and do that and and look at them the hacker doesn't sell itself is very aggressive in terms of the timelines so so you get on the time pressure if you sort of come in blank and I haven't looked at those yeah and just if there

35. 20:38

    are any questions in your preparation or once you start working with these use cases to reach out to us on slack we'll try to be responsive there and help you in any way need it so with that I think we can close the call thank you for participating and wish you good luck for the hackathon and join us next week for the last session on double which is on the 9th of October thanks