Wix site with tables/grids and forms backed to 3rd Party API

Ask the community
, ,
1

Hi all,

I am hoping to use Wix as a front-end backed to a large 3rd party API backend. The backend currently powers our mobile apps with about 250+/- apis defined in swagger and hosted in AWS serverless as RESTful APIs, so very standard.

What I am hoping to do is use wix to provide a web app like as if I used Angular5, using repeaters/grids/lists/tables against JSON arrays, etc and just basic form work for the rest of the non-collection fields.

How can I wire up something like ng-repeat without using the wix backend databases? Can I use wix datasets and point them to the 3rd party APIs to fill and then proxy through the wix backend? (Server-to-Server) . Or even better, is there support to go direct from the web client to datasets to 3rd parties like a traditional PWA/SPA?

The key value prop here is that my clients want to be able to use Wix’s visual designers to cointrol the look and feel while I wire up the web app to the backend in similar fashion to the mobile… Additionally, swagger generates a rich JS API library which I can host elsewhere and reference from the client or wix backend code. So if I was able to really just get the ng-repeat read/write (binding) with JSON arrays, I think this would be pretty straight-forward…

Or am I way off base because it wouldn’t render well in the wix designers?

Thanks,
Rob

2

Hi,
In the future we may allow connecting datasets to any external data source, but it’s not there yet.
The thing is - you don’t have to use datasets, you can create the “bindings” yourself.
Meaning, query the 3rd party API and in your page code set the received values to the page elements.

There is a way to use datasets with 3rd party providers today, but it’s a bit of a workaround :slight_smile:
You can create a wix database (collection), and use data hooks to redirect all traffic to your 3rd party.
That way you can use datasets that are configured to use this dummy collection you created, but eventually you query and update your 3rd party data provider.
I’ve never tried it myself, so I’m not sure all edge cases are covered here. I would personally just update the elements directly since it’s usually very easy to do.

Good luck!

3

Thanks Tomer. You mentioned: “you can create the “bindings” yourself.
Meaning, query the 3rd party API and in your page code set the received values to the page elements.”

But how would I use the collection/table/paging abilities for binding a .take() model to a visual collection? Wouldn’t I need ng-Repeat or something like that?

You mentioned: “There is a way to use datasets with 3rd party providers today, but it’s a bit of a workaround :slight_smile: . You can create a wix database (collection), and use data hooks to redirect all traffic to your 3rd party.
That way you can use datasets that are configured to use this dummy collection you created, but eventually you query and update your 3rd party data provider.”

That sounds pretty interesting and I may be able to grow with your datasets model as they are enriched in your system. Do you have any kind of tutorial or example of how to use datasets with data hooks for redirection?

Many thanks! I personally believe that there are many applications that have built RESTful APIs for mobile apps that could stand to leverage wix.com for their PWA/SPA client through better linkage to third-party APIs.

4

Anything you can do with datasets, you can also do with code. For example, this is how you use the Table element with code:

$w("#myTable").dataFetcher = fetchData;

function fetchData(startRow, endRow) {
    return fetchFromThirdParty(startRow, endRow).then(result => {
        return {
            pageRows: result.items,
            totalRowsCount: result.totalItems
        }
    });
}

The table element will call your function whenever it needs to fetch more rows, so you can call your 3rd party with the start and end parameters.
Each of the elements support setting data through code, you can read more about the APIs here:

Regarding data hooks, read here: