Equivalent Python Code for small Javascript constructor

Anvil Q&A
1

I am trying to convert the equivalent Javascript code into python that anvil will understand. Specifically, the "class { get properties… " section is giving me trouble.

window.Smart('#grid', class {
    get properties() {
        return {
behavior: { allowColumnReorder: true },
		   dataSource: new Smart.DataAdapter({
                dataSource: [{id:8, firstName: 'test_First', lastName: 'test_last, productName: 'oil', quantity:5, price: 5, total: 5}],
                dataFields: [
                    'id: number',
                    'firstName: string',
                    'lastName: string',
                    'productName: string',
                    'quantity: number',
                    'price: number',
                    'total: number',
'one: string'
                ]
            }),
            columns: [
                {
                    label: 'First Name', dataField: 'firstName', columnGroup: 'name'
                },
                { label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
                { label: 'Product', dataField: 'productName', columnGroup: 'order' },
                { label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
                { label: 'Unit Price', dataField: 'price',  columnGroup: 'order'},
                { label: 'Total', dataField: 'total',  columnGroup: 'order' }
            ]
        };
    }
});
2

if I understand correctly, the second argument to Smart is an anonymous class in javascript? Can this even be converted to python and anvil?

3

that is a very niche api.

From what I can tell. The api wants a callable that returns an object that has a key: properties.
So I have a feeling you can make it work :flushed:

try replacing the anonymous class with

window.Smart('#grid', lambda: {'properties': {
    'behaviour': {...
})

Though, if that works i’ll be amazed…
You’ll need to make sure you have the correct component added to the page with the id grid

Thankfully you do have other options.

the Smart api documentation also lists a ‘traditional way’ to interact with the library. This should work fine.

OR

instead of converting javascript to python you can write pure javascript in a custom component’s custom html. Wrap it in a function and call this from python.

Anvil Docs | HTML Forms

1 Like
4

Super niche but pretty cool. Going for option 2, which is to avoid that constructor altogether and just plug in the values serially after getting the grid from the page:

    const grid = document.querySelector("#grid");
    grid.dataSource = new window.Smart.DataAdapter({
 			dataSource: [{id:9, firstName: 'test_first',  lastName: 'test_last', productName: 'Wipers', 
                         quantity:15, price: 15, total: 15}],
 			dataFields: [
 				'id: number',
 				'firstName: string',
 				'lastName: string',
 				'productName: string',
 				'quantity: number',
 				'price: number',
 				'total: number'
 			]
 		});
    grid.columns =  [
                 {
                     label: 'First Name', dataField: 'firstName', columnGroup: 'name'
                 },
                 { label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
                 { label: 'Product', dataField: 'productName', columnGroup: 'order' },
                 { label: 'Quantity', dataField: 'quantity', columnGroup: 'order', summary: ['avg', 'max'] },
                 { label: 'Unit Price', dataField: 'price',  columnGroup: 'order', summary: ['min']},
                 { label: 'Total', dataField: 'total',  columnGroup: 'order', summary: ['sum'] }
             ];

Appreciate the help!

1 Like
5

I was curious so i tried it - and it worked (not that I fully trust it!)
And I think the traditional js api is the way to go here.

Note you’ll likely hit this issue with the grid component: jQuery conflict with Smart.Grid · Issue #4 · HTMLElements/smart-webcomponents · GitHub

https://anvil.works/build#clone:EGDYNKCYDIKPWAB4=E6DNWZX5MVFXPHHW476H7L4D

If you’re looking for a gird component that does something similar you might want to check out the Tabulator dependency Tabulator - with anvil components

1 Like
6

That bug is a bummer. But really cool that the solution worked.

I went the javascript way but having my doubts now with the filter bug unless I disable that feature for now. I will give tabulator a shot as well. It looks very similar and with better integration.

1 Like