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 -->
