Schema Studio Quickstart

Dromo's Schema Studio streamlines creating a schema, so you can start working with Dromo fast. This article dives deeper into how to use that schema and how to configure your Dromo importer.

Prerequisite

Begin by creating a schema using Schema Studio. For step-by-step instructions, see the guide on creating a schema.

Usage

When creating a DromoUploader instance with a saved schema, you can use the following configuration options:

• licenseKeystringRequired

  Your Dromo front-end license key, found in your Dromo dashboard

• schemastringRequired

  The name of the Schema Studio-built schema.

const dromo = new DromoUploader(licenseKey, schema);

This is the minimum set up required to create a DromoUploader instance; however, you can add further customization to make your importer your own!

User metadata

You can dynamically set user object at runtime.

• setUser(user: User) => void

  Used to set metadata about the User dynamically.

dromo.setUser({
  id: "123",
  name: "John Doe"
});

Settings

You can override certain settings dynamically at runtime. This provides similar flexibility to the complete JavaScript SDK, without all of the overhead.

• setDevelopmentMode(enableDevelopmentMode: boolean) => void

  Used to run the import in development mode.

• setHeaderOverrideRow(row: number) => void

  Used to set the headerOverrideRow setting.

dromo.setDevelopmentMode(true);

dromo.setHeaderRowOverride(4);

Looking to use Schema Studio with React?

You can use a Schema Studio-built schema with Dromo's React SDK by providing your schema's name to the DromoUploader component:

<DromoUploader
  licenseKey='YOUR_LICENSE_KEY'
  schemaName='YOUR_SCHEMA_NAME'
  user={{ id: 'jimUser' }}
  developmentMode={false}
>
  Open Dromo
</DromoUploader>

Using Angular?

We also support Angular for saved schemas created with the Schema Studio. Check out the example in our Angular guide

Basic Example

After you've saved a schema in the Schema Studio UI, click on the angled brackets icon on the summary page:

Clicking on this icon opens a pop-up containing a code snippet, which looks something like this:

<script
  type="text/javascript"
  src="https://unpkg.com/dromo-uploader-js/dist/DromoUploader.js"
></script>

<script type="text/javascript">
    const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
</script>

<div id="root">
    <button onclick="dromo.open()">Open Dromo</button>
</div>

Copy and paste this snippet directly into an HTML file in your own website's code.

Snippet part 1: Downloading Dromo

The first thing this code snippet does is download Dromo from our CDN into your website:

<script
  type="text/javascript"
  src="https://unpkg.com/dromo-uploader-js/dist/DromoUploader.js"
></script>

Snippet part 2: Configuring the uploader

Next, the snippet sets up a new DromoUploader instance:

<script
  type="text/javascript"
  src="https://unpkg.com/dromo-uploader-js/dist/DromoUploader.js"
></script>

<script type="text/javascript">
    const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
</script>

Snippet part 3: Using the importer

Finally, the code snippet adds a button that, when clicked, invokes the DromoUploader.open() method and starts the import process:

<script
  type="text/javascript"
  src="https://unpkg.com/dromo-uploader-js/dist/DromoUploader.js"
></script>

<script type="text/javascript">
    const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
</script>

<div id="root">
    <button onclick="dromo.open()">Open Dromo</button>
</div>

And that's it! Users can click the Open Dromo button, open the importer and start uploading data.

Advanced Example

Assigning user metadata

Currently, your importer doesn't know who is using it to upload information. If a user uploads data, there is no associated metadata for that user, so all user-related fields are left blank:

However, you can add more context to an upload by setting user metadata about the end user to associate with an import:

<script type="text/javascript">
  const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");

  // Create a user object to associate imports to
  const user = {
    id: '1',
    name: 'Jane Doe',
    email: 'jane@dromo.io',
    companyId: 'Dromo',
    companyName: '12345'
  };

  // Associate the above user to this import
  dromo.setUser(user);
</script>

Now when someone imports a new file, you can see the associated user metadata in your imports:

Development mode

The DromoUploader offers a "development mode" for testing import flows or iterating on finishing touches. Dromo doesn't charge you for data you import in development mode, but you are restricted to only importing 100 rows for any given file.

info

Your importer runs in development mode by default if you do not have an active Dromo subscription. To run Dromo in production, upgrade to one of our pricing plans.

You can switch your DromoUploader into development mode using the setDevelopmentMode method, like so:

<script type="text/javascript">
  const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
  dromo.setDevelopmentMode(true);
</script>

The importer now shows a development mode banner, and all incoming imports are now flagged as development imports:

Development mode imports

You can see development mode imports by toggling Development mode from the Imports tab in your Dromo dashboard.

To turn off development mode, you can either set setDevelopmentMode to false or remove the line entirely:

<script type="text/javascript">
  const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
  dromo.setDevelopmentMode(false);
</script>

Customizing a header row

If your users import files with superfluous header rows, you can use the setHeaderRowOverride method to tell Dromo to skip importing specific rows.

For example, if your client's invoices have three extra rows before the header row:

You can tell Dromo to skip these three initial rows automatically:

<script type="text/javascript">
  const dromo = new DromoUploader("YOUR_LICENSE_KEY", "YOUR_SCHEMA_NAME");
  // Our Dromo importer will skip the first three rows 
  // and make the 4th row our "header row"
  dromo.setHeaderRowOverride(3);
</script>

Now when the user imports the file, Dromo automatically skips the first three rows and correctly sets our header to the fourth row.

Receiving results and setting up hooks

Limitation on hooks

Dromo's Hooks enable you to automatically reformat, validate, and correct data via custom functions. Hooks will work with a Schema Studio snippet only if you are subscribed to a Dromo Pro plan.

You can add callbacks to handle your final results or add hooks to transform your data automatically.

Adding callbacks and hooks to the Schema Studio snippet works the same as with the JavaScript SDK

Callbacks are useful for transforming your data into the perfect shape or pushing it into your backend of choice. Alternatively, you can use a webhook to handle user imports directly on your server.

You've now learned how to fully customize your importer's behavior, enabling users to use Dromo for a streamlined importing experience. 🎉