Create a JSON file from a form submission

[Ricardo A]

Hi there, I am trying to create my first BC app but struggling to find a solution to create some data inside BC, I need to create a JSON file from a form submission that will be used as feed for my app.

How I see it working:

- Form submits details { Name, Email, Phone Number and a Date.} to a JSON file.

- My app.js will read the JSON file and populate the content on a graph.

Any other ideas will be much appreciated.

I don't know if BC is has another way to host data from an app! but if you know pleas share.

[Webmosphere_co_uk]

Hi Ricardo, the easiest way is to probably use a web app for data submission. Just output the submitted data onto a page and then render the page in json by appending ?json=true to the url

See details here

There are issues you need to be mindful of, such as the max items that the system will output before pagination, etc. So my advise is to make the docs your home for the next few days! Developers Docs‌

But really, the short answer is BC can do what you are after.

[john stephanites]

Exactly what I was looking for thanks!

[Liam Dilley]

Based on what you said, do you mean a web form on the website to JSON which you then use on your app?

You will not be able to do that as you cant write files on the front end like that.

A form will submit to the CRM and then with your app you read the CRM to manage what you need to do. If your doing anything with web apps through your app reading the data, Daves comment about pagination is mute because you would use the API and just parallel request or loop request to get all the items if you needed too.

[TheBCMan]

The JSON file format is a Javascript object, if you don't need to save the JSON file you could generate the JS object from the form (1 line in jQuery) then use it to populate the data in your graph. You could also save that data into a cookie if the user wanted to save it. Depends on your needs. Hope it helps

[Ricardo A]

‌The JSON is going to be used as a reading file for an app so following your idea it would work but it would have to work the following way:

the the form submits and a JSON is created.

another submission and the json creates another entry to the same file to allow an external application to read.

if you have an ideia how ir can vê do e can you please share.

thanks

[Liam Dilley]

It is supposed to be the other way around, the app makes the json and you would use module_json to read that and output with liquid. Web forms do not upload files to the FTP you can access, nor do they have permission to through javascript. You would have to send the request to a 3rd party system which did the JSON and FTP'ed that up.

[Ricardo A]

Hi Liam I must be explaining it wrong then, I am creating a BC App not an WebApp, At the moment I have my BC App generating the WebApp but once its done the JSON is generated somewhere in BC where i cannot fetch I tried using some directories to fetch it.

I created the app this way:

function tryWebAppCreate(data, xhr) {

    $.getJSON("booking-data/webapp.json")

        .done(function(webAppJsonDescriptor) {

            createWebApp(WEBAPP_NAME, webAppJsonDescriptor.webAppCustomFields, webAppJsonDescriptor.webAppSampleData, loadTeamMembers);   

        })

        .fail(function() {

            systemNotifications.showError("Could not load webapp definition file");

        });

}

But now to fetch it i tried: ( replacing the braces with appropriate IDs)

/api/v2/admin/sites/[site id]/webapps/[app id]/webappp.json

My 3rd party App will connect to my BC App and from my app i have another call to send the JSON info.

I just cant call it! maybe if you know how please let me know.

[Liam Dilley]

I know your creating an app.

File fetching in apps can be done anywhere on the site, if the file is there you just need to do the storage current path and the file location - Works - Doing lots of apps. You can not read a file from a 3rd party of course with the cross domain policy stuff etc unless setup to do so (jsonp, authorisation etc)

Why are you not using the documentation?
Developer reference
You should be reading that way and you do not have to read a json file in an app or on the site with javascript when you have a module to do that on the new rendering engine.

In terms of BC app to 3rd party, BC do not strictly support this in the app echo system as of yet, but if you need to pass data between a 3rd party you just need to do it in the correct manner with cross domain etc in mind.

What was confusing was you were on about form submissions which appeared to mean front end feeding the app. But you can upload a file in your BC app and then read it no problem, using the BC API and bcapi.js

[Ricardo A]

Hi Liam you partially answered my question THANKS A LOT! , but initially the plan was to within the BC App I would use a form to submit to a WebApp (DONE!) and by generating a WebApp JSON item I was struggling to find a way to read that JSON from my app to render some fields from that JSON on to FullCalendar (NOT DONE),  I used some calls but it didn't work in BC.

I just need to find that JSON generated by my WebApp now... So I can fetch 3 fields from it.

So now I am going to head to the DOCUMENTATION until I find a way to be able to read the generated JSON in BC WebApp.

[Liam Dilley]

You need to specify a folder for the file upload of web app submissions. If you have a json file that is uploaded and specify the path it will be in that folder. Using the file system API through a BC app you can then read it.

[TheBCMan]

Assuming your 3rd party app is in browser, so therefore it must adhear to cross domain policies, like Liam said you wont be able to read the JSON file you just saved remotely it wont work for security reasons.

If your app is not in browser like CURL or a mobile app etc you should be able to read it.

In short I think you need to re-think your plan with cross domain in mind, there are ways around it, like JSONP, GET and POST requests and to a degree iframes.