Tips & Tricks For Oracle Visual Builder (Vbcs) Application

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, jаvascript, 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 time.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 jаvascript 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 download 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 Begin 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 Time 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 jаvascript 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 jаvascript 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 & Time
Lecture 7 Date Time 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, download, 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
https://www.udemy.com/course/tips-tricks-for-oracle-visual-builder-vbcs/