Published 1/2023MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHzLanguage: English | Size: 3.39 GB | Duration: 5h 57m

Learn Tips & Tricks, use cases, examples, problem solving techniques, responsive design,..etc in Oracle Visual Builder

What you'll learn

Tips and Tricks for Oracle Visual Builder application components

Common use cases in Oracle Visual Builder

Examples for using components in Oracle Visual Builder

Problem solving techniques

Requirements

Basic knowledge of Oracle Visual Builder application is required

Description

Get Started with Visual BuilderTo use Oracle Visual Builder you should be familiar with the tools available for building your applications.About Oracle Visual BuilderOracle Visual Builder is a visual and declarative cloud environment for developing and hosting engaging mobile and web applications.Visual Development ExperienceIt provides simple but powerful visual development tools to create responsive web and mobile apps—all without the need to install any additional software. This rich set of visual tools help you quickly design your app by dragging and dropping UI components and customizing their attributes to define behavior. While these tools lend themselves to low-code developers, experienced developers can just as easily access the underlying source code, even extend it using standard HTML5, javascript, and CSS techniques for complex needs.Easy Access to DataVisual Builder makes it easy to access your app’s data through REST-based services. So you can create reusable business objects to implement your app’s business logic and store its data, which can then be managed through REST endpoints that Visual Builder generates for you. Or you can pick data objects exposed by Oracle SaaS or Oracle Integration applications in an integrated catalog of REST services. You can also access data from any external REST service with just a few clicks.Development and Hosting PlatformVisual Builder is a complete development tool as well as a hosting platform, which means you can manage your application’s lifecycle right from development to test and final publishing. Version management and data migration are built into an app’s lifecycle, making it easy for you to stage and publish your app and manage its data in every phase.What’s more, Visual Builder is a managed service. This means that once you provision a Visual Builder instance, there’s very little you need to do beyond developing and publishing your app. Everything the app needs to run successfully (including a web server to host your application and to secure data access) is taken care of. Thus, as a development team, you can take your app from development to stage and publish it in a very short .Your Visual Builder instance provides capabilities for your visual application both as a visual development tool (at the top) as well as an app hosting platform with a built-in web server (indicated by server-side components at the bottom):As a visual development tool, Visual Builder provides access to UI components and WYSIWYG interfaces that leverage the open-source Oracle javascript Extension Toolkit (JET). This visual environment, known as the Designer, features several visual editors that a development team can use to collaboratively build rich UIs that span multiple devices. It also supports Redwood, the Oracle standard for user experience, that lets you develop apps that provide the same look and feel as apps delivered from Oracle.Within this environment, you can develop browser-based responsive web and mobile apps. You can create progressive web apps, which combine the on-device mobile experience with a web app’s ease of distribution—eliminating the need to updates from app stores.As an app hosting platform, Visual Builder provides various capabilities to publish and run your app in the cloud, including an embedded database that stores your app’s business objects—essentially Oracle tables with business logic exposed through REST APIs—and their data.It also includes a REST proxy service to manage access to external REST endpoints. When your app’s data comes from REST APIs in Oracle catalogs such as Oracle SaaS or Oracle Integration, the proxy service uses server-side integration with the Oracle Identity Cloud Service (IDCS) to manage authentication and authorization (by default) through identity propagation. When your app’s data comes from other REST endpoints, authenticated REST mechanisms are used to manage credentials.Together, these components provide the resources required to host your visual app and manage its data.When your apps are published, they become available to your users in the cloud, from any desktop or mobile device, with communication to the app’s underlying JET components secured over HTTPS and REST.How to B with Oracle Visual Builder SubscriptionsHere's a summary of the key steps to help Oracle Cloud account administrators get started with Oracle Visual Builder:Sign up for a free credit promotion or purchase a subscription. See Request and Manage Free Oracle Cloud Promotions or Buy an Oracle Cloud Subscription in Oracle Cloud Infrastructure Documentation.Sign in to your Cloud Account. See Access Oracle Visual Builder.Create accounts for your users and assign them appropriate privileges and roles. See Managing Users, User Accounts, and Roles in Managing and Monitoring Oracle Cloud.Access Oracle Visual BuilderTo develop applications using Oracle Visual Builder, you access the service through a web console.To access Oracle Visual Builder:Sign in to your Oracle Cloud Account using your user name and password. See Signing In for the First in Oracle Cloud Infrastructure Documentation.For more information about sign-in options, see Understanding the Sign-In Options.Enter your identity domain and user credentials. Click Sign In.Anatomy of Visual ApplicationsTo develop applications with Oracle Visual Builder, you need to understand a few basic concepts.The basic components of a visual application are mobile applications, web applications, service connections, business objects, and processes. The basic building blocks of a mobile or web application are user interface (UI) components, variables, action chains, page flows and page navigation, and data access through REST endpoints.The building blocks and their interactions can be summarized as follows.Variables are the mechanism used to store and manage client state. Every variable has a type and a scope.An action chain is composed of a set of one or more individual actions. The action chain is triggered by an event. (For example, a button click can trigger navigation to a page.) Each action represents a single asynchronous unit of work. An action chain can define input parameters and local variables that are available only in the context of that action chain, and can also access application-scoped input parameters and variables.Page flows and page navigation govern the transmission of information from one page to another. Each individual page has a lifecycle, as does an application. Each lifecycle event (entry or exit from a page, for example) can provide a trigger for an action chain.A UI component encapsulates a unit of user interface through a defined contract – specifically, the Oracle javascript Extension Toolkit (JET) components contract. Component attributes are bound to variables, and component events and variable changes trigger action chains.All data entering a mobile or web application is based on REST. This data can come from business objects and service connections. Actions and variables control how data is sent to and from a REST endpoint in a mobile or web application. A developer can create a type that matches the REST payload and pass the data using a variable of that type.Variables and LifecyclesApplication and page variables are constructed automatically in a specific application or page lifecycle stage.Input parameters that are passed by means of navigation rules, or bookmarkable variables that are provided on the URL, are automatically assigned to their corresponding variables. When you modify the value of a bookmarkable variable, the URL is automatically adjusted to match that new value (that is, a new history state is pushed). In this way the page is always bookmarkable and does not require any specific user action in order to be bookmarked.Variables and EventsA variable triggers an onValueChanged event when it is modified. This event is triggered only when the value is actually changed; setting a variable value to the same value does not trigger an event. The variable must be explicitly changed to send the event. For example, if a variable is a complex type, modifying an inner property does not fire this event; the entire variable must be set by means of an API call. In this case, the framework can add to the payload those parts of the structure that have changed. For example, if you changed the name property of an Employee and then reset the Employee, the framework would send an event that the Employee changed, and as part of the payload indicate that the name has changed.An onValueChanged event can trigger a user-defined action chain. The trigger has the payload of the former and new values of the variable.For more information, see Understanding Actions and Action Chains.Understand Actions and Action ChainsAn action chain is made up of one or more individual actions, each of which represents a single asynchronous unit of work. Action chains are triggered by events.An action chain, like a variable, has a scope: it can be defined at the application level or the page level. You can call an application-scoped action chain from any page. You can call a page-scoped action chain only from the page on which it is defined.To create an action chain, you can define your own actions and can also use predefined actions. Actions within a particular chain run serially, and multiple action chains can run concurrently. Action chains simplify the coordination of asynchronous activities.A single event may simultaneously trigger multiple action chains. For example, the page enter event may trigger multiple data fetch action chains simultaneously.An action is a specific function that performs a task. In javascript terms, an action is a Promise factory. An action can exist only within an action chain, not independently.Action Chain Context and ContractAction chains have a well-defined context and contract: an action chain orchestrates its underlying actions, coordinating state flow and the execution path. The action chain can define input parameters and local variables that are only available in that context. An example of an action chain is one that makes a REST call (first action), then takes the result of that and stores that in a variable (second action).An action chain maintains its own context, which is accessible through an implicit object called $chain. Actions may export new state to that context, but it is only available to future actions along that same action chain. An action chain can be created in the context of a page or the application and exists within the scope of the page or the application. It has a defined interface and contract and can be called by event triggers using its ID.The action chain contract has three parts.Action Chain PartDescriptionIDString identifier for the action chainInput parametersZero or more variables that can be passed into the action chain and added to the action chain contextVariablesZero or more variables that are internal to the action chain and usable internally by actionsFor more information, see Action Chains in the Oracle Visual Builder Page Model Reference.Built-in ActionsVisual Builder comes with a set of built-in (or predefined) actions for an action chain, used for example navigation or assigning variable values. An action has the following parts that the developer can define:Action PartDescriptionIDString identifier for this action instance. This action part is optional, since the ID is necessary only if you wish to refer to the action’s results later in the action chain.ConfigurationAny properties of the action that the user can configure. For example, for the Navigate action, the page to navigate to and any parameters required for that navigation.Outcomes and ResultsAn action may have multiple potential outcomes (such as success or failure, or a branch). It can also return results.Exported StateAn action may export state that is available to future actions within the context of the same action chain.The predefined actions include conditionals and other processing instructions. For example, you can use if and switch actions that take an expression and offer multiple different chain continuations depending on the result.For details about predefined actions, see Actions in the Oracle Visual Builder Page Model Reference.Event Handling for Action ChainsAction chains are defined at the application or page level and triggered by a specific event, such as onValueChange (for a variable), or vbEnter. An event may include a payload, which can then be used within the action chain. A payload may be passed into an action chain through the input parameters. The Visual Builder user interface can help you create action chains automatically (with appropriate input parameters) based on a particular event.

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: index.html customization

Lecture 2 Add Favicon image

Lecture 3 Add Page Title

Section 3: Responsive design

Lecture 4 Basics of responsive design in Visual Builder, oj-flex, oj-flex-item

Section 4: Input Number

Lecture 5 Input Number validator

Section 5: Input Text

Lecture 6 Input Text Validator

Section 6: Date &

Lecture 7 Date converter

Lecture 8 Restrict min and max date selection

Section 7: Form Layout

Lecture 9 Validation of form parameters

Section 8: Select (Single)

Lecture 10 Create a basic LOV with Select(Single) Component

Lecture 11 Modify the label and value field in SDP variable after configuring Select single

Lecture 12 itemTemplate for Select(single) to modify the list

Lecture 13 Modify SDP variable type and show more details in the list of values

Lecture 14 How to use item text property of Select single

Lecture 15 How to use value item property of Select single

Lecture 16 Populate Select (single) with Array Data Provider (ADP)

Section 9: Table Component

Lecture 17 Import and use Tooltip component

Section 10: Train Component

Lecture 18 Use Train component for building multi step wizard

Lecture 19 Customize Train Component navigation with button

Lecture 20 Adding information for each step in Train wizard

Lecture 21 Adding submit button at the end of Train component Wizard

Section 11: Dialog Component

Lecture 22 Create a simple popup screen or layout with Dialog component

Lecture 23 Change Dialog animation (Ripple, ZoomIn, FadeIn,None,...etc)

Section 12: Business Objects

Lecture 24 Add a row (record) manually

Lecture 25 Create a formula field

Lecture 26 Create Aggregation field

Lecture 27 Create field based on formula with iterator

Lecture 28 Create field based on formula with conditional iterator

Lecture 29 Business Rule : Object Trigger

Lecture 30 Business Rule : Field Trigger

Lecture 31 Business Rule : Object Validator

Lecture 32 Business Rule : Field Validator

Lecture 33 Business Rule : Object Function

Lecture 34 REST API's for Business Object

Section 13: Service Connection

Lecture 35 Invoke REST API

Lecture 36 Invoke Integration exposed as REST API over GET / POSThttp methods

Lecture 37 Invoke SOAP web service / BIP report web service

Lecture 38 Access Database

Section 14: Embed Web Pages

Lecture 39 Embed Google Map and Google Image in Visual Builder web page

Section 15: Embed Visual Builder Web Page in Oracle SaaS / Fusion Cloud

Lecture 40 Embed Visual builder page in SaaS / Fusion with Page Integration

Lecture 41 Assignment: Embed Employee application in Fusion with customized URL

Section 16: JWT token based authentication between Oracle SaaS (Fusion) and Visual Builder

Lecture 42 Decode JWT token and username and learn to create Pass on value variable

Lecture 43 Use Fusion HCM REST API to authenticate the user

Lecture 44 Hide the navigation list for Unauthorized users by removing HTML elements

Section 17: Implement Pagination (for REST API's, Integration,...etc)

Lecture 45 Build integration to fetch database records in batches

Lecture 46 Add Pagination to table component in Visual Builder application with SDP

Lecture 47 Add Pagination to table component in Visual Builder application with ADP

Section 18: User Interface Examples

Lecture 48 Build Registration Form / Feedback Form

Section 19: Working with Files

Lecture 49 Bulk insertion with CSV file, , reset, upload to BO

Section 20: Application Management

Lecture 50 How to edit an application post publishing or create new version

Lecture 51 Lock and unlock live web application

Lecture 52 Rename an application

Lecture 53 Duplicate an application

Lecture 54 Delete an application

Lecture 55 Allow anonymous access to application for an user

Lecture 56 Add anonymous user to Business Object's role based security

Section 21: (Optional) Provisioning Visual Builder instance

Lecture 57 Provision With Visual Builder Studio

Lecture 58 Provision with Oracle Integration

Section 22: Congratulations!!!

Lecture 59 Congratulations!!! and Thank You for completing this course successfully

Professional who want to sharpen their Oracle Visual Builder application skill

HomePage:

gfxtra__Tips_Trick.part1.rar.html

gfxtra__Tips_Trick.part2.rar.html

gfxtra__Tips_Trick.part3.rar.html

gfxtra__Tips_Trick.part4.rar.html