I’m sure this is an easy fix. I’m trying to use an external .js file to store a list of JSON objects stored as string constants (see form-json.js below).
These JSON objects should be able to be imported by name into an index.html file that loads a web component in which the JSON is passed to the web component as an input.
When I hardcode the JSON directly to a const inside a script block (without the type=”module” directive that’s required for importing modules) inside the index.html file it works great. However, I’m getting undefined when I try to load the same JSON block from the imported .js module. My code is below:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Component!</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&family=Titillium+Web:wght@700&display=swap');
</style>
<link rel="stylesheet" href="styles.css"></head>
<body>
<my-form></my-form>
<script src="my-form.js" defer></script>
<script type="module">
import {MY_SCHEMA_FORM} from './form-json.js';
// alert('the schema form is:', UNITY_SCHEMA_FORM);
let el = document.querySelector('my-form');
el.formJson = UNITY_SCHEMA_FORM;
</script>
</body>
</html>
form-json.js
export const MY_SCHEMA_FORM = `{
schema: {
type: "object",
title: "Remote API Call Example",
description: "Makes an HTTP get using new getEndpoint() call",
version: {
created: "10.3.6",
modified: "10.3.6"
},
size: "",
properties: {
"select-users": {
type: "string"
},
"select-products": {
type: "string"
},
brewery: {
type: "string"
}
},
required: [],
rootWidgetClass: " space-between",
externalFieldsEvent: "",
externalFieldsParams: [
{
paramName: "",
paramValue: ""
}
],
htmlWrapperClass: ""
},
layout: [
{
allowOverride: true,
appearance: "outline",
defaultField: true,
description: "https://jsonplaceholder.typicode.com/users",
disabled: false,
floatLabel: "always",
htmlClass: " ",
id: "1678396918016",
itemsLayoutWidth: " ",
key: "select-users",
mandatoryField: false,
placeholder: "Select a user...",
title: "JsonPlaceholder.com",
title_revert: "getEndpoint",
type: "select",
wruxDynamic: true,
wruxDynamicHook: "getEndpoint",
wruxDynamicParams: [
{
name: "_endpoint",
value: "jsonplaceholder.typicode.com/users"
},
{
name: "_labelKey",
value: "email"
},
{
name: "_valueKey",
value: "id"
}
]
},
{
allowOverride: true,
appearance: "outline",
defaultField: true,
description: "https://dummyjson.com/products",
disabled: false,
floatLabel: "always",
htmlClass: " ",
id: "1678399671572",
itemsLayoutWidth: " ",
key: "select-products",
mandatoryField: false,
placeholder: "Select a product...",
title: "DummyJSON.com",
title_revert: "Select",
type: "select",
wruxDynamic: true,
wruxDynamicHook: "getEndpoint",
wruxDynamicParams: [
{
name: "_endpoint",
value: "dummyjson.com/products"
},
{
name: "_labelKey",
value: "title"
},
{
name: "_valueKey",
value: "id"
}
]
},
{
allowOverride: true,
appearance: "outline",
autocomplete: "off",
dataType: "text",
debounceCustomEventDelay: 0,
defaultField: true,
description: "https://api.openbrewerydb.org/breweries?by_city=birmingham",
disabled: false,
floatLabel: "always",
panelWidth: " ",
htmlClass: " ",
id: "1678400690595",
itemsLayoutWidth: " ",
key: "brewery",
mandatoryField: false,
placeholder: "Birmingham Breweries...",
title: "API.OpenBrewery.org",
title_revert: "getEndpoint",
type: "text",
wruxAutoCompleteHook: "getEndpoint",
wruxAutoCompleteParams: [
{
name: "_endpoint",
value: "api.openbrewerydb.org/breweries?by_city=birmingham"
},
{
name: "_labelKey",
value: "name"
},
{
name: "_valueKey",
value: "id"
},
{
name: "_hiddenColumns",
value:
"id, city, state, street, address_2, address_3, county_province, postal_code, country, longitude, latitude, updated_at, created_at"
}
]
}
],
data: {}
}`;
