Tenho uma tabela que tem apenas campos do tipo URL e um de referência. Esses URLs são gráficos do google sheets que quero mostrar conforme o usuário informa esse de referência. É possível buscar essas URLs em um elemento customizado?
Hoje funciona em widget, mas não está muito bom e queria colocar dentro de um repetidor.
import { local, session } from 'wix-storage';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
let obra
let user //Declarar estas variáveis acima do onReady
let nome
$w.onReady(function () {
user = JSON.parse(session.getItem("user")) //Lembrar de deixar sel o LET
nome = JSON.parse(session.getItem("nome"))
$w('#dataset1').onReady(async () => {
await $w('#dataset1').setFilter(wixData.filter().eq('email', user.email))
$w('#txtNome').text = nome
$w('#txtNome').show()
})
detectarObra();
mostarDados();
});
$w('#dataset3').onReady(() => {
let item = $w('#dataset3').getCurrentItem();
let url1 = item.grafico1;
let url2 = item.grafico2;
let url3 = item.grafico3;
let url4 = item.grafico4;
let url5 = item.grafico5;
let url6 = item.grafico6;
if (url1 === undefined) {
$w('#html1').collapse();
} else {
$w('#html1').src = url1;
$w('#html1').expand();
}
if (url2 === undefined) {
$w('#html2').collapse();
} else {
$w('#html2').expand();
$w('#html2').src = url2;
}
if (url3 === undefined) {
$w('#html3').collapse();
} else {
$w('#html3').expand();
$w('#html3').src = url3;
}
if (url4 === undefined) {
$w('#html4').collapse();
} else {
$w('#html4').expand();
$w('#html4').src = url4;
}
if (url5 === undefined) {
$w('#html5').collapse();
} else {
$w('#html5').expand();
$w('#html5').src = url5;
}
if (url6 === undefined) {
$w('#html6').collapse();
} else {
$w('#html6').expand();
$w('#html6').src = url6;
}
});
console.log(user)
//////////////////////////////////////////////////////////////////////////////
async function detectarObra() {
await wixData.queryReferenced("Clientes", user.empresa, "Obra-2")
.then(async (results) => {
$w("#dataset2").setFilter(wixData.filter().eq('_id', results))
let options = [];
results.items.forEach((obra) => {
options.push({ "value": obra._id, "label": obra.descricao });
});
$w('#ddObra').options = options;
})
.catch((err) => {
let errorMsg = err;
});
}
export function ddObra_change(event) {
let selectObra = $w('#ddObra').value
filterReferenced(selectObra)
}
Olá Amanda! Sim, é possível embora seja um pouco mais complexo a tarefa. Tentarei explicar da maneira mais resumida.
Os elementos customizados podem ser adicionados ao repetidor e no seu caso, eles podem abrir a url do seu banco em iframe se desejar (no caso do google sheets você poderia usar uma API para criar a planilha com os dados da sua url, mas vamos deixar para outro momentos).
Basicamente esses são os passos para fazer isso funcionar:
1 - Crie um campo de texto no seu banco e armazene suas URLs.
2 - Crie seu repetidor e arraste seu elemento customizado para o repetidor.
3 - Crie o código do seu elemento personalizado em um arquivo público JS.
4 - Ao carregar o repetidor ou ao realizar a pesquisa de dados, exiba os resultados através do forEachItem e use o setAttribute para enviar o dado da URL ao elemento customizado.
Aqui está um código que fiz de exemplo...
Page code:
import wixData from "wix-data"; $w.onReady(() => { loadContinents() }); //trazer a lista de itens do banco de dados referenciado function loadContinents() { wixData.query('Continents') .find() .then(res => { let options = [{ "value": '', "label": 'All Continents' }]; options.push(...res.items.map(continent => { return { "value": continent.title, "label": continent.title }; })); $w('#iContinent').options = options; }); } //acionar o filtro ao alterar o dropdown export function iContinent_change(event) { let selectedContinent = $w('#iContinent').value // chamar a função com o parâmetro filterReferenced(selectedContinent) } // função de filtro por busca de referência async function filterReferenced(cont) { //buscar titulo do item referenciado let newSelection = (await wixData.query('Continents') .eq('title', cont) .find()).items[0]; console.log(newSelection.title) //buscar itens do banco principal que tenham o item referenciado let res = await wixData.queryReferenced('Continents', newSelection, "Articles"); if (res.items.length > 0) { let items = res.items; console.log(items) let anAddress = items[0].url; console.log(anAddress) //mostrar os resultados do filtro no repetidor const myFilter = wixData.filter() $w('#articlesList').data = items; $w("#articlesList").forEachItem(($item, items, index) => { $item("#image5").src = items.image; $item("#text36").text = items.authorCountry; $item("#text38").text = items.articleTitle; // enviar os dados para o elemento customizado $item("#customElement1").setAttribute('address', items.url) }); } else { // handle case where no matching items found } } export function dataset1_ready() { //carregar os itens no repetidor let repeaterData = $w("#articlesList").data; $w("#articlesList").forEachItem(($item, repeaterData, index) => { $item("#image5").src = repeaterData.image; $item("#text36").text = repeaterData.authorCountry; $item("#text38").text = repeaterData.articleTitle; // enviar os dados para o elemento customizado $item("#customElement1").setAttribute('address', repeaterData.url); }); }
Custom element .js code:
class CustomEl extends HTMLElement { constructor() { super(); } static get observedAttributes() { return ['address']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'address') { this.chartData = newValue; this.render(this.chartData); } } render(theAddress) { let myUrl = theAddress; const shadow = this.attachShadow({ mode: 'open' }); let iframe = document.createElement("iframe"); iframe.src = myUrl; iframe.style = "resize:both" shadow.append(iframe) } } customElements.define('sheet-elem', CustomEl);
Aqui usei iframe para tornar o código mais simples, mas com certeza você pode usar outros métodos no elemento customizado.
Espero ter ajudado ;)