Skip to content
No description, website, or topics provided.
JavaScript TypeScript HTML
Branch: master
Clone or download

Latest commit

Latest commit 62fe09d Mar 31, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
daml Upgrade to recommended stack Feb 27, 2020
ui-js Add typescript version Mar 30, 2020
ui-ts Add typescript version Mar 30, 2020
.gitignore Fix report page Mar 27, 2020
COPY Initial commit Nov 22, 2019
LICENSE Initial commit Nov 22, 2019 Add typescript version Mar 30, 2020
azure-pipelines.yml Disable Slack notifications Mar 31, 2020
daml.yaml Fix report page Mar 27, 2020

DAML App Template


This repository contains a simple UI template for a DAML application. It provides ledger connectivity and shows how to create simple reports from contracts. The template is based on create-react-app and the Material UI framework.


Quick Start

Build the DAML project:

daml build

Start the sandbox ledger:

daml start --start-navigator 'no'

Generate the Typescript code:

daml codegen ts -o daml2ts -p package.json .daml/dist/*.dar

Install the Javascript dependencies:

yarn install

Build the UI code:

yarn workspaces run build

Start up the development server:

You can run the Javascript version of the app:

cd ui-js && yarn start

Or the Typescript version of the app:

cd ui-ts && yarn start

This opens a browser page pointing to http://localhost:3000/#/login. Note that the development server serves content via http and should not be exposed as is to a public-facing network.

Login as Alice (case sensitive), leaving the password blank.

You are now redirected to http://localhost:3000/#/app/report where you see the contract listed with an explorable JSON tree in the Argument column. This the default view implemented in src/pages/default/Default.js, which uses the Contracts React component's defaults. It is useful to explore a contracts data to determine which fields to display.

In the report tab you can see a ledger view with specific fields displayed for the contract, a textfield and button to exercise a choice. It is implemented in src/pages/report/Report.js, where you can see how custom columns and actions can be passed to the Contracts component.

You can now transfer asset from Alice to Bob by entering Bob as the new owner and hitting hit Enter. This exercises the Give choice on the contract, which assigns the new owner. Notice how the owner changes when you do that.

By modifying this template you can now create a custom UI for your DAML application.

Deploying to DABL

Deploying daml-ui-template to the hosted DAML platform project:DABL is quite simple. Log into your DABL account, create a new ledger and upload your DAML models and your UI.

To upload the DAML models, compile them into a DAR by executing

daml build -o daml-ui-template.dar

at the root of your repository. Afterwards, open to the DABL website, select the ledger you want to deploy to, go to the "DAML" selection and upload the DAR daml-ui-template.dar you have just created.

To upload the UI, create a ZIP file containing all your UI assets. First build all projects:

daml build
daml codegen ts .daml/dist/daml-ui-template-0.0.1.dar -o daml2ts -p package.json
yarn workspaces run build

Then, zip either the Javascript build output:

(cd ui-js && zip -r ../ build)

Or the Typescript build output:

(cd ui-ts && zip -r ../ build)

Afterwards, select the "UI Assets" tab of your chosen ledger on the DABL website, upload the ZIP file you have just created and publish it.

To see your deployed instance of create-daml-app in action, follow the "Visit site" link at the top right corner of your "UI Assets" page.

You can’t perform that action at this time.