Creating Dropdown-Controlled Fields

Osmos Uploaders now have support for dropdown-controlled fields and advanced validation functionality. This section is meant as an overview of these new features as well as a guide for setting them.

Setting a field as dropdown-controlled can be done by setting the `validOptions` attribute of the schema definition for the field in the code snippet used to embed the uploader on your page. Here’s an example of a code snippet for a dropdown-controlled field:

{
 name: 'paymentType',
 displayName: 'Payment Type',
 description:
   'The medium of payment which was used to complete the transaction',
 validOptions: ['cash', 'credit', 'debit', 'paypal'],
},

When using the Osmos Uploader, users will be presented with a dropdown containing the provided set of options to pick from when mapping their data for this column:

Dropdown selector within your Uploader

An actual upload snippet with this example of a dropdown field may look like the JavaScript below:

<!-- Osmos File Upload Button -->
<!-- See this link for more docs. https://docs.osmos.io/osmos-uploader/webpage-integration -->
<script src="https://cdn.osmos.io/button/embed/v1/OsmosButton.js"></script>
<script>
  Osmos.configure({
  schema: {
    fields: [
      {
        name: "ProductID",
        displayName: "ProductID",
        description: "<Your field description here>"
      },
      {
        name: "FirstName",
        displayName: "FirstName",
        description: "<Your field description here>"
      },
      {
        name: "LastName",
        displayName: "LastName",
        description: "<Your field description here>"
      },
      {
        name: 'paymentType',
        displayName: 'Payment Type',
        description:'The medium of payment which was used to complete the transaction',
        validOptions: ['cash', 'credit', 'debit', 'paypal']
      }
    ]
  },
  token: "example_some_uploader_token_uuid_example",
  uploadDescription: "<Include a description of your uploader upload here which will be shown to users that click the uploader>",
  

  // Set to false to show the schema for the destination connector in the uploader on the file upload screen.
  hideUploadSchema: true,

  // Set to false to show the uploader description on the file upload screen.
  hideUploadDescription: true,

  // Set to false to show the advanced version of the uploader, with formulas, SmartFill, and QuickFixes.
  disableAdvancedMode: true,

  // Maximum number of records displayed in the Uploader UI (User Interface).
  // This value is capped at 100,000 and higher values will default back to 100,000.
  // Can be lowered to increase UI performance when using expensive validators.
  // NOTE: Your file can have >100,000 rows and will be processed fully. There are no limits to how many records can be uploaded.
  //       This setting only limits the number of rows displayed in the UI.
  maxRecords: 100000,

  // Set to true to hide the preview pane screen for CSV files in the uploader.
  hideCSVPreviewPane: false,

});
</script>
<button class="ftl-button" onclick="Osmos.handleClick('w9ziodyyfx4mq6wl2tw1y6dpp6tctfardjeuqsl_n0i-gtsbb')">
  Upload Your Data
</button>
<!-- End Osmos File Upload Button -->