The business objects in Oracle Visual Builder let you store textual data, but what if you need to store some binary data such as images? You'll need to find a separate location to store those. Oracle has various solutions for this including the storage cloud and the content and experience cloud, in this blog we'll show you how to do this using Oracle ATP Database (or any other Oracle DB).
The concept is simple, you create a table with a Blob type column in your DB, in that column you are going to store the images. You now need to expose that table through a REST service - and call that REST service from your Visual Builder app to load the images. In your Visual Builder app you can have a business object where one of the fields will contain the URL that is used to fetch the image back. In the video demo below I show you how to build this solution.
I'm using an ORDS based module that exposes the get and post methods on the table. Blain Carter pointed me to this tutorial that covers creating the table and the ORDS interfaces. A couple of tips as you work through the tutorial:
You need to first complete the method for getting a specific image by ID, before you can test the POST method (which depends on that GET method for the return value).
The PL/SQL code I used is:
declare image_id integer; begin insert into gallery (title,content_type,image) values (:title,:content_type,:body) returning id into image_id; commit; :status := 201; :location := image_id; end;
And the parameters are:
Note that I also needed to whitelist my VB instance on the ORDS side - so I'll be allowed to access that end point.
Now that you have the backend services, it's a simple matter of building the VB based UI.
In VB you'll define service connections to work with the ORDS endpoints. Note that you'll need to switch the MediaType of the endpoints to accept image/png instead of the regular application/json.
Then we use the take picture action to allow us to pick an image either from the hard-drive when running as a web app, or from the device when running as a mobile app.
We then pass the file to the REST endpoint which creates a record in the DB storing the image. The REST service returns a URL address for the image location as the text value we store in the VB business object. The value is returned as part of the header - so we use this expression to get it: $chain.results.callRestEndpoint1.headers.get('location')
Check out the video below to see the development process in VB: