After we have created a productType and have its type id, how can we set custom attributes during product create API calling. Until now what I've been doing is 1st, create the product, then update the custom attribute. But, I am unable to do so with the required attributes.
you can supply all the custom attributes in the product creation payload. Example - here I provide values for attributes brand on the master variant, for a previously created product type which specifies that there is an attribute called Brand:
{
"productType": {
"typeId": "product-type",
"id": "6c06998a-c576-4a8d-8ace-dc306d70e1d1"
},
"name": {
"en": "Some Product"
},
"slug": {
"en": "product_slug_sdfsdfsdfdsdfsdfdssdf"
},
"masterVariant": {
"prices": [{
"value": {
"centAmount": 2500,
"currencyCode": "EUR"
},
"country": "US"
}],
"attributes": [{
"name": "brand",
"value": "Hugo Boss"
}]
},
"variants": [{
"prices": [{
"value": {
"centAmount": 2600,
"currencyCode": "EUR"
},
"country": "US"
}],
"attributes": [{
"name": "brand",
"value": "Hugo Boss"
}]
}]
}
Related
I have an array of objects with array of items in it as below. Is it possible to make use of material-table in react for making editable table?
I want to achieve
I am able to display the data but it not working for editable feature.
[
{
"name": "Customer 1",
"amount": 450,
"items": [
{
quantity: "1",
details: "Tea",
},
{
quantity: "2",
details: "Sweets",
},
],
},
{
"name": "Customer 2",
"amount": 560,
"items": [
{
quantity: "1",
details: "Tea",
},
{
quantity: "2",
details: "Sweets",
},
],
}
]
I'm trying to code an example that shows two dropdowns: one for countries, and one for related states/provinces. When you choose a country on the first dropdown, the values of the second dropdown should be updated to display only the provinces/states of the selected country. Usually this is accomplished using some sort of Ajax call, but in this case the requirement is to try it purely with react-jsonschema-form. Is this actually possible ? I have seen several examples using dependencies / references, but none solving this particular scenario.
So far I came up with this: https://codesandbox.io/s/fervent-cherry-lokjk?file=/src/App.js
{
"definitions": {
"Countries": {
"title": "Country",
"type": "object",
"properties": {
"country": {
"type": "string",
"enum": [
"CANADA",
"USA",
"MEXICO"
]
}
},
"dependencies": {
"country": {
"oneOf": [
{
"properties": {
"country": {
"enum": [
"CANADA"
]
},
"province": {
"type": "string",
"title": "Province",
"enum": [
"AB",
"BC",
"MB"
]
}
}
},
{
"properties": {
"country": {
"enum": [
"USA"
]
},
"province": {
"type": "string",
"title": "State",
"enum": [
"AL",
"AK",
"AR"
]
}
}
},
{
"properties": {
"country": {
"enum": [
"MEXICO"
]
},
"province": {
"type": "string",
"title": "State",
"enum": [
"AGS",
"BC",
"BCS"
]
}
}
}
]
}
}
}
},
"title": "Demo for countries",
"type": "object",
"properties": {
"currentCountry": {
"$ref": "#/definitions/Countries",
"title": "Select country / province / state"
}
}
}
which basically can render a Country dropdown and a State/Province dropdown. When selecting a country, the corresponding state/province dropdown is updated correctly with the new set of enum values.
However, with this approach, the form will submit a field named "currentCountry" with two properties inside, the country and the province
currentCountry: { country: "USA" , province: "AL" }
but of course the idea is to submit "country" and "province" as two different form fields, without the need to be wrapped.
So, does anyone know how to achieve this typical use case ? Is there any best approach to it using JSON schemas ?
Maybe having to code a custom widget ? (I would like to avoid that if possible)
Thanks in advance !
After playing a bit more, seems I found the solution. A correct schema that does exactly what is needed is this one:
{
title: "Demo for countries",
type: "object",
properties: {
country: {
type: "string",
title: "Country",
enum: ["CANADA", "USA", "MEXICO"]
}
},
dependencies: {
country: {
oneOf: [
{
properties: {
country: {
enum: ["CANADA"]
},
province: {
type: "string",
title: "Province",
enum: ["ALBERTA", "BRITISH COLUMBIA", "MANITOBA"]
}
}
},
{
properties: {
country: {
enum: ["USA"]
},
province: {
type: "string",
title: "State",
enum: ["ALABAMA", "OREGON", "ARKANSAS"]
}
}
},
{
properties: {
country: {
enum: ["MEXICO"]
},
province: {
type: "string",
title: "State",
enum: ["JALISCO", "BAJA CALIFORNIA", "CHIAPAS"]
}
}
}
]
}
}
}
and the above codesandbox example has been updated to reflect this change.
Happy to know this scenario can be achieved with JSON schemas !
I have an array as shown below
[
{
"id": 42,
"name": "updateDate",
"displayName": "UPDATE DATE",
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
},
]
I want to filter objects in this array with the property UiControl === DATERANGE and create 2 objects from the filtered object and also append'FROM' and 'TO' to the name and the displayname property as shown below
final output:
[{
"id": 42,
"name": "fromupdateDate", // 'from'appended to name property
"displayName": "FROM UPDATE DATE", // 'FROM' appended to displayName property
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 42,
"name": "toupdateDate", // 'to' appended to name property
"displayName": "TO UPDATE DATE", // 'TO' appended to displayName
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{ // this object stays the same
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
}]
We can create such an array in multiple ways, but I want to find an optimized way of creating such an object.
flatMap will do what you want:
const input = [{
"id": 42,
"name": "updateDate",
"displayName": "UPDATE DATE",
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
},
];
const output = input.flatMap(v => v.uiControl === "DATERANGE"
? [
{ ...v,
name: `from${v.name}`,
displayName: `FROM ${v.displayName}`
},
{ ...v,
name: `to${v.name}`,
displayName: `TO ${v.displayName}`
}
]
: [v]);
console.log(output);
Note that you'll have to compile this with esnext support. See this question for more details. It also won't work out of the box on IE or Edge. If that's a problem in your use case, you'll want to use a polyfill or rely on map + reduce like this:
const output = input.map(v => v.uiControl === "DATERANGE"
? [
{ ...v,
name: `from${v.name}`,
displayName: `FROM ${v.displayName}`
},
{ ...v,
name: `to${v.name}`,
displayName: `TO ${v.displayName}`
}
]
: [v])
.reduce((acc, cur) => (acc.push(...cur), acc), []);
I've this JSON:
{
"world": [{
"name": {
"en": "America"
},
"type": "continent",
"children": [{
"type": "state",
"name": {
"en": "Florida"
}
}, {
"type": "state",
"name": {
"en": "Hawaii"
}
}]
}, {
"name": {
"en": "Europe"
},
"type": "continent",
"children": [
]
}]
}
I need to do two select. The first contain the selection of type "continent", the other one based on the first must be showed if the first one children's are > 0 and contain the selection of the states.
You can do this,
<select name="client" ng-model="selectedRequest.continent" ng-options="c.name.en for c in clients.world" required></select>
<select id="department" ng-model="selectedRequest.state" ng-options="d.name.en for d in selectedRequest.continent.children"></select>
DEMO
EDIT
Updated fiddle disabling select if children is empty
My data looks like:
[
{
"_id": "531dbf8b9b9fc50000a8d611",
"active": true,
"client": {
"_id": "531dbf8b9b9fc50000a8d60e",
"name": "TR"
},
"company_id": "531dbf8b9b9fc50000a8d60c",
"createdOn": "2014-03-10T13:35:07.313Z",
"description": "Gentle Action Application Pads",
"dimensions": {
"weight": 22.4
},
"lot": [
],
"meta": {
"category": "Face",
"msrp": 7.75
},
"sku": "11002",
"unit_of_measure": "each",
"updatedOn": "2014-03-10T13:35:07.314Z"
},
{
"_id": "531dbf8b9b9fc50000a8d612",
"active": true,
"client": {
"_id": "531dbf8b9b9fc50000a8d60e",
"name": "TR"
},
"company_id": "531dbf8b9b9fc50000a8d60c",
"createdOn": "2014-03-10T13:35:07.317Z",
"description": "Skin Renewal System - Enriched (CA)",
"dimensions": {
"weight": 22.4
},
"lot": [
],
"meta": {
"category": "Face",
"msrp": 321.6
},
"sku": "11700CA",
"unit_of_measure": "each",
"updatedOn": "2014-03-10T13:35:07.318Z"
}
]
In my view, I have:
<input type="text" ng-model="receivingSku" placeholder="Locations loaded via $http" typeahead="sku for sku in getSku($viewValue) | filter:$viewValue" typeahead-on-select="selectedSku()" class="form-control">
I need the sku field for each item to be in the typeahead. How can I accomplish this?
Presently, I get an error:
Error: matches is undefined
You can loop over your original array and create an array of just SKU's:
var skus = origArray.map(function(e) {
return e.sku;
});
The new array can be used for typeahead.
PS - I'm not very familiar with typeahead. If typeahead is capable of peeking into objects, you don't need to do this.