Customize InputDialog inputs in "daml-ui-template" sample

New to daml and TS any help is much appreciated. TIA
I have a DAML code like below

Edit:
I am referring to this example: digital-asset / daml-ui-template

Main.daml

...
data SomeEnum = 001 | 002 | 003
  deriving (Eq, Show)

data someDataSet = SomeDataSet
  with
    data1: Text
    data2: SomeEnum
    data3: Decimal
  deriving (Eq, Show)

template TempA
  with
    owner : Party
    issuer : Party
    myDataSet : SomeDataSet
...

myDataSet.tsx


import { TempA } from "@daml.js/daml-ui-template-0.0.1/lib/Main";
...
const defaultNewDataProps : InputDialogProps<TempA> = {
      open: false,
      title: "New Data Request",
      defaultValue: {
        owner: '',
        issuer: '',
        myDataSet:  **HOW DO I HANDLE IT HERE?**
      },
      fields: {
        owner : {
          label: "owner",
          type: "selection",
          items: [ "owner" ] 
        }, 
        owner : {
          label: "Issuer Name",
          type: "text"
        },  
        myDataSet : {  **AND HERE?**   }
      },
      onClose: async function() {}
}
...

1.I need to get the fields “data1”,“data2”,“data3” as a form input in inputDialog and submit the data to contract.
2.how do I construct input field for ENUM type “data2” in form.

1 Like

Thanks for project structure suggestion
currently i am implementing this method - " However if you’re using React.js specifically then this client library is what you want."
But, my question was handling the data feed using Form input values (from react) for a “data customVar(someDataSet)” available in daml file.
or how to handle daml data types from library generated after daml files compile.
I am referring to this example: digital-asset/daml-ui-template and files under daml-ui-template/ui/src/pages/report

1 Like

If you’re working in TypeScript, the codegen should have generated the appropriate types for you. The easiest path forward would be to just open up the generated code: the generated folder structure can be a bit intimidating, but once you find the main TypeScript files, the generated code is fairly readable.

I don’t know much about daml-ui-template, but i what you’re looking for is a list of the possible values for an enum, you should find that fairly easily in the generated file.

2 Likes

@Hem-M The InputDialog methods inside of Report.tsx were designed to give us some light type driven guidance for simple types that might be in a template payload. Type driven input form generation is what we would strive for, but implementing it well is difficult and beyond the scope of code in that repository.

You can give myDataSet some default value

  const defaultDataSet : SomeDataSet = {
    data1 : "data1",
    data2 : 'Z001', // You have to rename the constructors for your enum.
    data3 : "123.0"
  }

But providing an input for this complicated record type using one HTML input element isn’t possible. You could use another InputField just for that. I suggest that you have a default value and Omit its value from the type for the TempA input props:

type InputFieldsForNewTempA = Omit<TempA , "myDataSet">;

Notice how we do something similar with the issuer party on the Asset input in that screen.

1 Like