Plugin not displaying (AG-Grid)

Trying to implement AG-Grid into bubble.io.

Having some trouble getting it to display. You can see the get started example in JS Fiddle here : Edit fiddle - JSFiddle - Code Playground

I put it into bubble, but it is not displaying the plugin and I do not know where I went wrong. Please advise.

(* IMPORTANT please note that I had to add the extra <"* at the beginning of the script tags so you can actually see the code in this forum, the extra " are not typos)

I included the script in my plugin header:

<"script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"><" /script>

Placed the code in my plugin initialize:

function(instance, context) {

instance.canvas.append( <"div id=“myGrid” style=“height: 180px; width:480px;” class=“ag-theme-alpine”><"/div>)

const columnDefs = [
{ field: “make” },
{ field: “model” },
{ field: “price” }
];

// specify the data
const rowData = [
{ make: “Toyota”, model: “Celica”, price: 35000 },
{ make: “Ford”, model: “Mondeo”, price: 32000 },
{ make: “Porsche”, model: “Boxter”, price: 72000 }
];

// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};

document.addEventListener(‘DOMContentLoaded’, () => {
const gridDiv = document.querySelector(‘#myGrid’);
new agGrid.Grid(gridDiv, gridOptions);
});

}

If you know why this is not displaying, please let me know how to fix it.

Thanks.

instance.canvas.append(’ <div id=“myGrid” style=“height: 180px; width:480px;” class=“ag-theme-alpine”>< /div>')

Single quotes on the outside of all the html

Be careful with placement of quotation marks

For example

And not saying this will fix it. It’s just a start.

Jared, I added a note specifically about the quotations, I was not able to get my code to display in this forum post as it was actually reading my HTML…in my plugin code the quotation marks are fine see below.

Any ideas how to get the grid to display? Or where I may have gone wrong ?

Sorry! Sometimes getting things to appear can be tricky.

Unfortunately I am unsure in this case as I haven’t worked with this library. A plugin builder secret may be to observe the code from other related/similar types of plugins

Considering all client side action code is sent to the user on page load, it won’t take you long to figure out how to access this info

1 Like

Anything in particular yo may suggest to look at. I tried free plugins, very few have code displayed. I have not yet been able to find an example I can use to get this AG-Grid to display.
Is there some king of plugin developer guide from bubble.io with examples ?

something about that DOM listener wasnt working.

here you go. something to get you started!

You’ll need to fork this and add in your own data. Hope it helps!

1 Like

Thanks a million! Will have a look and work on this.