- Home
- Forum
- JavaScript - EJ 2
- Using map component as a field type in query builder
Using map component as a field type in query builder
Is there any way to integrate the map component as a field type for the query builder using value template prope? I need to create a field that which allows user to select a lat and log from map, and use this as value in field
Hi Julio,
We have checked and prepared the sample based on your requirement; in that time, we have encountered some script error-throwing issues. So, we have confirmed the issue as “Script error thrown while clicking on svg element within the query builder" and logged a defect report. We will include the fix for this issue in the upcoming weekly release scheduled for the 29th of October 2024.
Feedback link: https://www.syncfusion.com/feedback/62399/script-error-thrown-while-clicking-on-svg-element-within-the-query-builder
You will be informed regarding this once the fix is published.
Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”
Regards,
YuvanShankar A
Hi Julio,
We are glad to announce that our weekly patch release (27.1.57) has been rolled out. We have included the fix for “Script error thrown while clicking on svg element within the query builder” in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end (27.1.57).
Sample link: https://stackblitz.com/edit/ktz1lu-1cdbee?file=index.ts
Package link: https://www.npmjs.com/package/@syncfusion/ej2-react-querybuilder
Please let us know if you need any further assistance on this.
Regards,
YuvanShankar A
Good evening,
I had an error when I clicked on the map, the latitude and longitude were captured but the error shown in the images ended up occurring.
I used the example given above on stackblitz like this:
columns: data.columns.map((column) => {
return {
...column,
columns: column.columns.map((subcolumn) => {
if(subcolumn.type !== 'map') return subcolumn
// console.log(subcolumn)
return {
...subcolumn,
type: 'string',
operators: [
{ value: 'equal', key: 'Equal' },
{ value: 'notequal', key: 'Not Equal' }
],
template: {
create: () => {
elem = document.createElement('div');
return elem;
},
destroy: (args) => {
let map = ej.base.getComponent(document.getElementById(args.elementId), 'maps');
if (map) {
map.destroy();
}
},
write: (args) => {
let map = new ej.maps.Maps({
layers: [{ shapeData: {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [{}] //here I passed on my features
}}],
width: '200px',
height: '200px',
click: (e) => {
var value = `latitude: ${e.latitude} - longitude: ${e.longitude}`;
var element = this.queryBuilder.element.querySelector(`#${e.target.split('_L')[0]}`);
this.queryBuilder.notifyChange(value, element, 'value');
}
});
map.appendTo('#' + args.elements.id);
}
}
}
})
}
}),
In data.columns my data structure is this:
[
{
"field": "Apps",
"label": "Apps",
"columns": [
{
"field": "AmeDigital",
"label": "AmeDigital",
"type": "boolean"
},
{
"field": "Americanas",
"label": "Americanas",
"type": "boolean"
},
{
"field": "AmongUs",
"label": "AmongUs",
"type": "boolean"
},
{
"field": "App99",
"label": "App99",
"type": "boolean"
},
{
"field": "Babbel",
"label": "Babbel",
"type": "boolean"
},
{
"field": "BancoDoBrasil",
"label": "BancoDoBrasil",
"type": "boolean"
},
{
"field": "Banrisul",
"label": "Banrisul",
"type": "boolean"
},
{
"field": "Bilibili",
"label": "Bilibili",
"type": "boolean"
},
{
"field": "Bradesco",
"label": "Bradesco",
"type": "boolean"
},
{
"field": "BurgerKing",
"label": "BurgerKing",
"type": "boolean"
},
{
"field": "C6Bank",
"label": "C6Bank",
"type": "boolean"
},
{
"field": "Caixa",
"label": "Caixa",
"type": "boolean"
},
{
"field": "CaixaEletronico",
"label": "CaixaEletronico",
"type": "boolean"
},
{
"field": "CaixaTem",
"label": "CaixaTem",
"type": "boolean"
},
{
"field": "Calculadora",
"label": "Calculadora",
"type": "boolean"
},
{
"field": "CarteiraDeTrabalhoDigital",
"label": "CarteiraDeTrabalhoDigital",
"type": "boolean"
},
{
"field": "CartolaFc",
"label": "CartolaFc",
"type": "boolean"
},
{
"field": "Discord",
"label": "Discord",
"type": "boolean"
},
{
"field": "DominosPizza",
"label": "DominosPizza",
"type": "boolean"
},
{
"field": "Drive",
"label": "Drive",
"type": "boolean"
},
{
"field": "Duo",
"label": "Duo",
"type": "boolean"
},
{
"field": "Duolingo",
"label": "Duolingo",
"type": "boolean"
},
{
"field": "Facebook",
"label": "Facebook",
"type": "boolean"
},
{
"field": "FacebookLite",
"label": "FacebookLite",
"type": "boolean"
},
{
"field": "Fgts",
"label": "Fgts",
"type": "boolean"
},
{
"field": "Fotos",
"label": "Fotos",
"type": "boolean"
},
{
"field": "GloboPlay",
"label": "GloboPlay",
"type": "boolean"
},
{
"field": "Gmail",
"label": "Gmail",
"type": "boolean"
},
{
"field": "Google",
"label": "Google",
"type": "boolean"
},
{
"field": "GoogleMaps",
"label": "GoogleMaps",
"type": "boolean"
},
{
"field": "GooglePlay",
"label": "GooglePlay",
"type": "boolean"
},
{
"field": "GoogleTranslate",
"label": "GoogleTranslate",
"type": "boolean"
},
{
"field": "GoogleTv",
"label": "GoogleTv",
"type": "boolean"
},
{
"field": "GovBr",
"label": "GovBr",
"type": "boolean"
},
{
"field": "Homescapes",
"label": "Homescapes",
"type": "boolean"
},
{
"field": "Icloud",
"label": "Icloud",
"type": "boolean"
},
{
"field": "Ifood",
"label": "Ifood",
"type": "boolean"
},
{
"field": "Instagram",
"label": "Instagram",
"type": "boolean"
},
{
"field": "Itau",
"label": "Itau",
"type": "boolean"
},
{
"field": "Kinedu",
"label": "Kinedu",
"type": "boolean"
},
{
"field": "LinkedIn",
"label": "LinkedIn",
"type": "boolean"
},
{
"field": "Magalu",
"label": "Magalu",
"type": "boolean"
},
{
"field": "Mcdonalds",
"label": "Mcdonalds",
"type": "boolean"
},
{
"field": "MercadoApp",
"label": "MercadoApp",
"type": "boolean"
},
{
"field": "MercadoCredito",
"label": "MercadoCredito",
"type": "boolean"
},
{
"field": "MercadoLivre",
"label": "MercadoLivre",
"type": "boolean"
},
{
"field": "MercadoPago",
"label": "MercadoPago",
"type": "boolean"
},
{
"field": "Messenger",
"label": "Messenger",
"type": "boolean"
},
{
"field": "MicrosoftTeams",
"label": "MicrosoftTeams",
"type": "boolean"
},
{
"field": "Nba",
"label": "Nba",
"type": "boolean"
},
{
"field": "NetEaseMusic",
"label": "NetEaseMusic",
"type": "boolean"
},
{
"field": "Netflix",
"label": "Netflix",
"type": "boolean"
},
{
"field": "Next",
"label": "Next",
"type": "boolean"
},
{
"field": "Nfl",
"label": "Nfl",
"type": "boolean"
},
{
"field": "Nubank",
"label": "Nubank",
"type": "boolean"
},
{
"field": "Olx",
"label": "Olx",
"type": "boolean"
},
{
"field": "Picpay",
"label": "Picpay",
"type": "boolean"
},
{
"field": "Pix",
"label": "Pix",
"type": "boolean"
},
{
"field": "PrimeVideo",
"label": "PrimeVideo",
"type": "boolean"
},
{
"field": "Rappi",
"label": "Rappi",
"type": "boolean"
},
{
"field": "Reddit",
"label": "Reddit",
"type": "boolean"
},
{
"field": "Roblox",
"label": "Roblox",
"type": "boolean"
},
{
"field": "Santander",
"label": "Santander",
"type": "boolean"
},
{
"field": "Shazam",
"label": "Shazam",
"type": "boolean"
},
{
"field": "Shein",
"label": "Shein",
"type": "boolean"
},
{
"field": "Shopee",
"label": "Shopee",
"type": "boolean"
},
{
"field": "Skype",
"label": "Skype",
"type": "boolean"
},
{
"field": "Soundcloud",
"label": "Soundcloud",
"type": "boolean"
},
{
"field": "Spotify",
"label": "Spotify",
"type": "boolean"
},
{
"field": "SpotifyLite",
"label": "SpotifyLite",
"type": "boolean"
},
{
"field": "Teams",
"label": "Teams",
"type": "boolean"
},
{
"field": "Telegram",
"label": "Telegram",
"type": "boolean"
},
{
"field": "TelegramX",
"label": "TelegramX",
"type": "boolean"
},
{
"field": "Tiktok",
"label": "Tiktok",
"type": "boolean"
},
{
"field": "Tinder",
"label": "Tinder",
"type": "boolean"
},
{
"field": "Twitch",
"label": "Twitch",
"type": "boolean"
},
{
"field": "Twitter",
"label": "Twitter",
"type": "boolean"
},
{
"field": "Uber",
"label": "Uber",
"type": "boolean"
},
{
"field": "WhatsApp",
"label": "WhatsApp",
"type": "boolean"
},
{
"field": "WhatsAppBusiness",
"label": "WhatsAppBusiness",
"type": "boolean"
},
{
"field": "Yahoo",
"label": "Yahoo",
"type": "boolean"
},
{
"field": "YahooMail",
"label": "YahooMail",
"type": "boolean"
},
{
"field": "Youtube",
"label": "Youtube",
"type": "boolean"
},
{
"field": "YoutubeKids",
"label": "YoutubeKids",
"type": "boolean"
},
{
"field": "ZeDelivery",
"label": "ZeDelivery",
"type": "boolean"
},
{
"field": "Zoom",
"label": "Zoom",
"type": "boolean"
}
]
},
{
"field": "Canais",
"label": "Canais",
"columns": [
{
"field": "ElegivelPush",
"label": "ElegivelPush",
"type": "boolean"
},
{
"field": "FlagCaptiveSM",
"label": "FlagCaptiveSM",
"type": "boolean"
},
{
"field": "MeuTim",
"label": "MeuTim",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "OptIn",
"label": "OptIn",
"type": "boolean"
}
]
},
{
"field": "Demografia",
"label": "Demografia",
"columns": [
{
"field": "DataNascimento",
"label": "DataNascimento",
"type": "date",
"format": "dd/MM/yyyy"
},
{
"field": "Idade",
"label": "Idade",
"type": "number",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
}
]
},
{
"field": "NomeCidade",
"label": "NomeCidade",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "NomeEstado",
"label": "NomeEstado",
"type": "string",
"operators": [
{
"key": "Selecione",
"value": "in"
}
]
},
{
"field": "NumeroCep",
"label": "NumeroCep",
"type": "number",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
}
]
}
]
},
{
"field": "Device",
"label": "Device",
"columns": [
{
"field": "Fabricante",
"label": "Fabricante",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "Modelo",
"label": "Modelo",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "SistemaOperacional",
"label": "SistemaOperacional",
"type": "string",
"operators": [
{
"key": "Selecione",
"value": "in"
}
]
},
{
"field": "UltimoIMEI",
"label": "UltimoIMEI",
"type": "number",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
}
]
}
]
},
{
"field": "Fatura",
"label": "Fatura",
"columns": [
{
"field": "QuantidadeDeRecarga",
"label": "QuantidadeDeRecarga",
"type": "number",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
}
]
},
{
"field": "ValorFatura",
"label": "ValorFatura",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "nomePlano",
"label": "nomePlano",
"type": "string",
"operators": [
{
"key": "Selecione",
"value": "in"
}
]
}
]
},
{
"field": "Localização",
"label": "Localização",
"columns": [
{
"field": "LatitudeDia",
"label": "LatitudeDia",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "LatitudeFinalDeSemana",
"label": "LatitudeFinalDeSemana",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "LatitudeNoite",
"label": "LatitudeNoite",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "LongitudeDia",
"label": "LongitudeDia",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "LongitudeFinalDeSemana",
"label": "LongitudeFinalDeSemana",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "LongitudeNoite",
"label": "LongitudeNoite",
"type": "string",
"operators": [
{
"value": "equal",
"key": "Equal"
},
{
"value": "notequal",
"key": "Not Equal"
}
],
"template": {}
},
{
"field": "TempoPermanciaDia",
"label": "TempoPermanciaDia",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "TempoPermanciaFinalDeSemana",
"label": "TempoPermanciaFinalDeSemana",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
},
{
"field": "TempoPermanciaNoite",
"label": "TempoPermanciaNoite",
"type": "string",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
},
{
"key": "Está Vazio",
"value": "isempty"
},
{
"key": "Não Está Vazio",
"value": "isnotempty"
}
]
}
]
},
{
"field": "Personas",
"label": "Personas",
"columns": [
{
"field": "Bet",
"label": "Bet",
"type": "boolean"
},
{
"field": "CNPJ",
"label": "CNPJ",
"type": "boolean"
},
{
"field": "ClasseSocial",
"label": "ClasseSocial",
"type": "string",
"operators": [
{
"key": "Selecione",
"value": "in"
}
]
},
{
"field": "Descontos",
"label": "Descontos",
"type": "boolean"
},
{
"field": "Entregador",
"label": "Entregador",
"type": "boolean"
},
{
"field": "Esporte",
"label": "Esporte",
"type": "boolean"
},
{
"field": "Esportista",
"label": "Esportista",
"type": "boolean"
},
{
"field": "Games",
"label": "Games",
"type": "boolean"
},
{
"field": "Geracao",
"label": "Geracao",
"type": "string",
"operators": [
{
"key": "Selecione",
"value": "in"
}
]
},
{
"field": "Mercado",
"label": "Mercado",
"type": "boolean"
},
{
"field": "TemCarro",
"label": "TemCarro",
"type": "boolean"
},
{
"field": "Times",
"label": "Times",
"type": "boolean"
}
]
},
{
"field": "Score Cliente",
"label": "Score Cliente",
"columns": [
{
"field": "ScoreCliente",
"label": "ScoreCliente",
"type": "number",
"operators": [
{
"key": "Igual",
"value": "equal"
},
{
"key": "Diferente",
"value": "notequal"
},
{
"key": "Maior ou igual a",
"value": "greaterthanorequal"
},
{
"key": "Maior que",
"value": "greaterthan"
},
{
"key": "Entre",
"value": "between"
},
{
"key": "Não entre",
"value": "notbetween"
},
{
"key": "Menor ou igual a",
"value": "lessthanorequal"
},
{
"key": "Menor que",
"value": "lessthan"
}
]
}
]
}
]
Hi Julio,
We have checked your reported query and as we said earlier, we have fixed in type of script error throwing issue in 27.1.57 version query builder Syncfusion packages.
Package link: https://www.npmjs.com/package/@syncfusion/ej2-react-querybuilder
Based on your provided screenshot, we suspect that, you are using the old version so kindly update your Syncfusion package to latest version (<27.1.57) to resolve this issue.
Additional add the below code snippet to your sample to avoid script error thrown issue.
|
let map: Maps = new Maps({ layers: [{ shapeData: world_map }], width: '200px', height: '200px', click: (e) => { if(e.latitude !== null && e.longitude !== null) { var value = `latitude: ${e.latitude} - longitude: ${e.longitude}`; var element = qryBldrObj.element.querySelector(`#${e.target.split('_L')[0]}`); qryBldrObj.notifyChange(value, element, 'value'); } } }); |
Sample link: https://stackblitz.com/edit/ktz1lu-xg5gel?file=index.ts
Please let us know if you need any further assistance on this.
Regards,
YuvanShankar A
- 5 Replies
- 2 Participants
-
JC Julio Cavallari
- Oct 17, 2024 08:20 PM UTC
- Nov 19, 2024 12:05 PM UTC
