Sign in

Product Manager for Oracle Visual Builder.I talk about Oracle JET, VBCS, React, React Native, Spring Boot. Views are my own.

You can add animation to you pages while navigating similar to this JET Cookbook example. Here’s how it can be done.

Navigation animation

oj-vb-content element accepts animation property which is passed down to oj-module internally.

Creating animation object

Open you shell page JS and define the module function as below. …


Product tours are easy ways to introduce new features and/or guide a user through a self-service app. Here’s how you can create a product tour for your visual app. The demo uses Bootstraptour.

demo product tour

Add the libs

Configure the following libs in your app-flow.json (configure the libs mentioned here.


If you want your user to not leave the site due to a process running or unsaved changes, you can use the window.onbeforeunload event listener. Here’s how you would do it in a Visual App.

Photo by Dustin Tramel on Unsplash

Create a module function to register the listener

This module function will register the event listener, you could also skip this part and…


In this tutorial we’ll see the recommended way to insert html string in visual applications. We do not recommend inserting html using data-bind= “html : …” syntax or element.innerHtml since these are prone to xss attacks.

Using oj-bind-dom

Here’s a DOM binding example on Oracle JET Cookbook and link to js doc.

Create a Module function that returns the config required by the DOM binding.

define(['ojs/ojhtmlutils'], function(HtmlUtils) {
'use strict';
var PageModule = function PageModule() {};

PageModule.prototype.getConfig = function() {
const viewStr = '<div> Sample <b>text</b> from <i>module function.</i></div>'
return {
view: HtmlUtils.stringToNodeArray(viewStr),
data: {
}
}
}
return PageModule;
});

Use it in your html

<div class="oj-flex">
<oj-bind-dom config="[[$functions.getConfig()]]"></oj-bind-dom>
</div>

Run it…

Assets

Visual App

Version

VBCS: 19.4.3.1

JET: 8.1.3


Visual Builder (VBCS/VB Runtime) comes with hosting where you can deploy (stage/publish) web apps through single clicks. If you prefer, you can develop an app on visual builder and deploy it on another server. In this tutorial i will demonstrate how you can deploy a visual app on Heroku

Photo by Pankaj Patel on Unsplash

Create a web app on visual builder

Create…


A curated list of techniques that can be applied to improve your visual app performance

Photo by Marc-Olivier Jodoin on Unsplash

enable zip

enabling gzip can (most certainly will) have the biggest impact on performance of your web app (file sizes can reduce by 70%–90%), you can read more about its impact here. You can check if its…


In this tutorial i will demonstrate how to use xlsx library in visual builder to download data as excel. The use of this library is entirely for demonstration purposes and me/my employer do not endorse it.

Import lib in Visual Builder

follow instructions from this post on how to import xlsx js.

Create the data table in the designer

For this tutorial…


In this tutorial i will explain how you can use an AMD based library in Visual Builder. If the library does not supports AMD style import, you should import the library directly in your index.html. Please read the library instructions before attempting to import it in Visual Builder.

Configure requirejs paths

Go to…


We will be using functional component + hook for building this component. setInterval will be used for core timer.

Create a component

The code (kinda) looks like this. the timer (state) tracks the timer status. user can start/play or pause the timer.

import React from 'react'function Timer() {const [timer, setTimer] =…


Load data progressively as user scrolls down with minimal coding. Skip to the The Front End section if you already have a backend available. Both backend and front end code is available on GitHub.

load more on scroll

The Backend

For this demo we need a backend which is capable of handling paging controls. …

Sumedh Chakravorty

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store