Skip to main content

Using field types

Dromo's field types enable you to specify how a field intakes, transforms, validates, and outputs information. Dromo provides several field types for different categories of data (e.g., numbers, text, date, time, etc.).

Using field types to ensure data consistency​

Field types enable you to ensure that all values in a field are the same type of data. The type of field denotes what kind of data that field accepts (e.g., the number field type allows numeric values, the string field type allows text, etc.).

Selecting the best type for your data​

By default, if you don't specify a type for a field, it uses the string type. For example, below, we create a field for collecting email addresses:

const fields = [
  {
    label: 'Email Address',
    key: 'emailAddress'
  }
];

const settings = {
  importIdentifier: 'Field types example'
};

const user = {
  id: '12345'
};

const dromo = new DromoUploader('FRONTEND_API_KEY', fields, settings, user);

Because we didn't specify a type in the above "Email Address" field, it uses the default string type.

However, if we update the "Email address" field to use the email type, that field gains the advantage of Dromo's built-in email address validation:

const fields = [
  {
    label: 'Email',
    key: 'email',
    type: 'email'
  }
];
Varieties of data

Selecting the ideal type for each field is essential to honing your Dromo workflow. See all field types.

Configuring field types​

Certain field types offer different configuration options, enabling you to customize how data is validated, displayed to the user, and output.

For example, we want a field that tracks prices in USD. We can add a "Price" field using the "usd" preset:

const fields = [
  {
    label: 'Price',
    key: 'price',
    type: ['number', { preset: 'usd' }]
  }
];
💡 Click to learn more about presets

Dromo provides many preset options for formatting standard number, date, time, and datetime formats. Presets work by automatically filling preset values into the configuration options for a field type.

You can manually configure the options for a number type:

type: [
  "number",
  {
    round: <integer>,
    displayFormat: <format object>,
    outputFormat: <format object>
  }
]

Or you can use a preset, which configures options for you. Under the hood, the "usd" preset inputs the following options:

{
  round: 2,
  displayFormat: {
    mantissa: 2,
    thousandSeparated: true,
    output: "currency",
    average: false,
    spaceSeparatedCurrency: true,
    currencyPosition: "prefix",
    currencySymbol: "$"
  }
}

To learn more about configuring your types without presets, see customizing numbers or customizing dates, times, and datetimes.

The "usd" preset ensures that this number field parses, validates, displays, and outputs values in dollars. Therefore, if a user attempts to insert a value that can't be parsed into USD (i.e., another currency), Dromo throws a validation error:

Validation error for inputting invalid currency

If the field can parse an input value into USD, Dromo displays that value formatted in dollars:

Input a number and see how Dromo formats it

However, this "display" format isn't how our data is actually output. In the Dromo dashboard's Imports tab, we'll see that our field still outputs the original value.

Input a number and see how Dromo formats it

If you want to change how a field is output, the outputFormat configuration option enables you to do so. For example, if you wish to display and output a field into USD, you can use the "usd" preset alongside an outputFormat option, like so:

{
  label: 'Price',
  key: 'price',
  type: [
    'number',
    {
      preset: 'usd',
      outputFormat: {
        mantissa: 2,
        thousandSeparated: true,
        output: 'currency',
        average: false,
        spaceSeparatedCurrency: true,
        currencyPosition: 'prefix',
        currencySymbol: '$'
      }
    }
  ]
}

In the Dromo dashboard's Imports tab, we'll see that our field is now output in USD:

Output a number in USD

This is the power of field types! You can tweak how each field validates, displays, and outputs values to ensure your data is always consistent.

Looking for more control over input data?

You can add validators to enforce stricter rules about the data a user can import.

More examples​

Below is an expanded example of defining several types of fields:

const fields = [
  {
    label: 'Email',
    key: 'email',
    type: 'email'
  },
  {
    label: 'Charges',
    key: 'charges',
    type: ['number', 'usd']
  },
  {
    label: 'Test Select',
    key: 'test_select',
    type: 'select',
    selectOptions: [
      { label: 'I want the option A!', value: 'A' },
      { label: 'I want the option B!', value: 'B' }
    ]
  },
  {
    label: 'Date',
    key: 'date',
    type: [
      'date',
      {
        locale: 'en-US',
        displayFormat: 'EEE MMM d, y'
      }
    ]
  }
];

const settings = {
  importIdentifier: 'Field types example'
};

const user = {
  id: '12345'
};

const dromo = new DromoUploader('FRONTEND_API_KEY', fields, settings, user);