Understanding the Lifecycle Event vbAfterNavigate in Oracle Visual Builder Cloud Service (VBCS)

 

Introduction:

Oracle Visual Builder Cloud Service (VBCS) is a powerful cloud-based development platform that allows users to create modern web and mobile applications. Within the framework of VBCS, various events play a crucial role in managing application functionality and user interactions. One such important event is the lifecycle event vbAfterNavigate. In this article, we will explore the significance of the vbAfterNavigate event and how it can be utilized to enhance the user experience and streamline application development in VBCS.

Understanding vbAfterNavigate:

vbAfterNavigate is a lifecycle event in VBCS that occurs after a navigation action is performed within an application. Navigation actions typically involve moving from one page to another, such as clicking a link, navigating through a menu, or submitting a form. When such navigation occurs, the vbAfterNavigate event is triggered, providing developers with an opportunity to execute custom logic or perform specific operations.

The Importance of vbAfterNavigate:

The vbAfterNavigate event is essential for controlling application behavior and enhancing the user experience. It allows developers to respond to navigation events and perform tasks based on the user’s actions. Here are some key benefits of leveraging vbAfterNavigate in VBCS:

1. Dynamic Content Loading:

With vbAfterNavigate, developers can load dynamic content on a page after a navigation action. This is particularly useful when retrieving data from external sources or updating portions of a page based on user input. For example, you can fetch additional data from a database or display relevant information based on the user’s selection.

2. Validation and Error Handling:

vbAfterNavigate provides an excellent opportunity to perform validation checks or error-handling tasks before rendering a new page. This helps ensure that data entered by the user is accurate and complete, and provides a seamless transition to the next page. You can validate user inputs, check for required fields, or display error messages to guide users.

3. Custom Navigation Flow:

By utilizing the vbAfterNavigate event, developers can create custom navigation flows based on specific conditions. For instance, you can redirect users to different pages depending on their role, permissions, or other business rules. This flexibility allows for personalized user experiences tailored to different scenarios.

4. Data Persistence:

In some cases, you may want to retain data across page navigation to provide a consistent user experience. vbAfterNavigate can be used to store user inputs or temporary data, ensuring that it remains accessible even when moving between pages. This can be particularly useful when working with multi-step forms or complex workflows.

5. UI Customization:

The vbAfterNavigate event can also be used to customize the user interface based on the navigation event. Developers can dynamically hide or show certain components, change the layout, or update the styling to provide a tailored experience for the user.

6. Analytics and Tracking:

If you want to track user behavior or capture analytics data, the vbAfterNavigate event is a convenient place to do so. You can use this event to send relevant data to analytics services or track specific actions performed by the user during navigation.

Implementing vbAfterNavigate in VBCS:

To utilize the vbAfterNavigate event in VBCS, developers can follow these steps:

1. Identify the navigation action or event that triggers the vbAfterNavigate event, such as button clicks, menu selections, or form submissions.
2. Define the custom logic or operations to be performed after the navigation occurs. This can include data retrieval, validation, error handling, or redirecting to different pages.
3. Access the vbAfterNavigate event in VBCS using the appropriate syntax or event handler. This may involve writing JavaScript code or leveraging VBCS’s visual development environment.
4. Test and iterate the implementation to ensure desired functionality and a seamless user experience.

Advantages of Low-Code Development Platforms

Low-code development platforms offer several advantages that make them increasingly popular among developers and businesses. Here are some key advantages of using low-code development platforms:

1. Increased productivity: Low-code platforms enable rapid application development by providing a visual interface, pre-built components, and drag-and-drop functionality. Developers can quickly assemble applications without writing extensive lines of code, resulting in faster delivery times and increased productivity.
2. Accelerated Development: Low-code platforms provide visual interfaces, drag-and-drop components, and pre-built templates that significantly speed up application development. Developers can create functional prototypes or even complete applications in a fraction of the time it would take using traditional coding methods.
3. Reduced complexity: Traditional software development often involves intricate coding and complex integrations. Low code platforms simplify the development process by abstracting away the underlying complexity. This allows developers to focus on the application’s logic and business requirements, rather than getting caught up in technical details.
4. Simplified Development Process: Low-code platforms abstract away complex programming concepts, reducing the learning curve and making it easier for developers of varying skill levels to create applications. The visual interfaces and declarative models enable developers to build applications by configuring and connecting pre-built components.
5. Easier collaboration: Low code platforms promote collaboration between business users, IT professionals, and developers. Non-technical stakeholders can actively participate in the development process, leveraging the visual interface to provide feedback, suggest improvements, and even contribute to building applications. This collaborative environment fosters better communication and alignment between different teams.
6. Agility and flexibility: With low code platforms, developers can quickly iterate and make changes to applications in response to changing business needs or user feedback. The visual interface makes it easier to modify and extend existing applications, reducing the time and effort required for maintenance and updates. This agility enables organizations to adapt rapidly to market demands and stay competitive.
7. Bridging the skills gap: Traditional software development often requires specialized coding skills, which can limit the number of people who can participate in the development process. Low-code platforms empower citizen developers and business users with limited programming knowledge to create functional applications. This helps bridge the skills gap and democratizes software development within organizations.
8. Improved efficiency and cost-effectiveness: Low code platforms streamline the development process, reducing the need for extensive coding, testing, and debugging. This efficiency translates into cost savings by minimizing the resources and time required for application development. Moreover, the reuse of pre-built components and integrations further accelerates development and reduces costs.
9. Enhanced innovation: Low code platforms foster a culture of innovation by allowing developers to experiment and prototype ideas quickly. The visual nature of these platforms encourages creative problem-solving and exploration, empowering developers to explore new possibilities and iterate on concepts rapidly.
10. Scalability and extensibility: Many low-code platforms provide scalability and extensibility features out of the box. Developers can leverage pre-built integrations, connectors, and APIs to easily connect with existing systems and scale applications as needed. This simplifies the process of building complex and integrated applications.
11. Maintenance and Updates: Low-code platforms often handle underlying infrastructure, security, and maintenance tasks, reducing the burden on developers. They typically offer automatic updates, security patches, and scalability features, allowing developers to focus on enhancing the application rather than managing the underlying technical aspects.
12. Future-proofing: Low-code platforms often provide a layer of abstraction that shields developers from changes in underlying technologies. As technology evolves, the platform can adapt and update its components, ensuring applications built on the platform remain compatible and functional in the future.
13. Cost Savings: Low-code development can reduce development and maintenance costs by enabling faster application development, reducing the need for extensive custom coding, and streamlining updates and maintenance tasks. It can also reduce the reliance on specialized developers, as citizen developers can contribute to the development process.

It’s important to note that while low-code development platforms offer numerous advantages, they may not be suitable for every use case. Complex and highly customized applications may still require traditional coding approaches. However, low-code platforms are well-suited for rapidly developing prototypes, building internal tools, automating business processes, and creating simple to moderately complex applications.

Oracle Visual Builder Cloud Service (VBCS): Empowering Low-Code Development

Introduction

In today's rapidly evolving digital landscape, businesses are seeking innovative ways to develop and deploy applications quickly and efficiently. Traditional software development approaches often involve complex coding processes that can be time-consuming and require specialized skills. However, with the emergence of low-code development platforms, such as Oracle Visual Builder Cloud Service (VBCS), businesses now have a powerful tool at their disposal to accelerate application development and streamline the development lifecycle.

What is Oracle VBCS?

Oracle Visual Builder Cloud Service (VBCS) is a cloud-based, low-code development platform that empowers users to create and deploy feature-rich web and mobile applications without the need for extensive coding knowledge. It provides a visual development environment where developers can design, develop, and deploy applications rapidly using a drag-and-drop interface and pre-built components.

Key Features of Oracle VBCS

1. Visual Development Environment: Oracle VBCS offers an intuitive visual interface that allows developers to design application user interfaces (UI) using a wide range of pre-built components and templates. This visual approach simplifies the development process, making it accessible to both seasoned developers and citizen developers with limited coding experience.
2. Drag-and-Drop Functionality: With VBCS, developers can easily drag and drop components onto the canvas to build their application's UI. This feature eliminates the need for manual coding, enabling faster development and reducing the chances of errors.
3. Seamless Integration: VBCS integrates seamlessly with other Oracle Cloud services, enabling developers to leverage the full capabilities of the Oracle ecosystem. It offers pre-built connectors and adapters that allow easy integration with various data sources, APIs, and enterprise systems, facilitating the development of robust and connected applications.
4. Extensibility: Oracle VBCS provides extensibility options, allowing developers to incorporate custom code and business logic when needed. This flexibility ensures that applications built with VBCS can meet complex business requirements while still benefiting from the low-code advantages.
5. Responsive UI Design: VBCS enables the creation of responsive applications that automatically adapt to different devices and screen sizes. This feature ensures a consistent user experience across desktops, tablets, and mobile devices without requiring additional development efforts.
6. Built-in Security and Governance: Oracle VBCS incorporates robust security measures to protect applications and data. It offers built-in user authentication and authorization controls, ensuring that only authorized users can access sensitive information. Additionally, VBCS adheres to industry-standard security protocols and provides role-based access control to govern application development and deployment processes.

Benefits of Oracle VBCS

1. Accelerated Development: The visual, low-code nature of Oracle VBCS enables developers to build applications more rapidly compared to traditional coding methods. This results in shorter development cycles and faster time-to-market for businesses, providing a competitive advantage.

2. Increased Agility: VBCS empowers organizations to respond quickly to changing market demands and evolving business needs. The platform's flexibility and ease of use enable rapid prototyping, iterative development, and continuous improvement, allowing businesses to adapt their applications with agility.

3. Cost and Resource Efficiency: With VBCS, businesses can achieve significant cost savings by reducing the dependency on highly skilled developers and shortening development cycles. The platform's visual development approach also allows citizen developers to contribute to the application development process, freeing up IT resources for more critical tasks.

4. Enhanced Collaboration: Oracle VBCS promotes collaboration between business stakeholders, designers, and developers. The visual interface enables easier communication and collaboration, ensuring that everyone involved in the project has a shared understanding of the application's requirements and design.

Conclusion

Oracle Visual Builder Cloud Service (VBCS) is a powerful low-code development platform that empowers businesses to build feature-rich web and mobile applications quickly and efficiently. By providing an intuitive visual interface, seamless integration capabilities, extensibility options, and built-in security, VBCS enables organizations to streamline their application development processes and respond to market demands with agility. With Oracle VBCS, businesses can accelerate innovation, reduce development costs, and deliver superior user experiences in the fast-paced digital world.

How to create a custom component in Oracle VBCS

In this post, we will see how to create a custom component in Oracle VBCS. 

Assuming a VBCS web application is already created (“mytestapp” is the application created for this example), the below steps will create a custom component in the application.

• Open application structure under web apps
• Expand Resources
• Right-click on the “components” folder and select Create option

•  Enter an id value for the custom component in the input text field on the dialog opened

•  Click on Create button
• This step will create a folder with a set of files as shown below

• Open each file to understand the content in it
• Let's try to understand each of these files

o   loader.js: This file helps to register the custom component with the application. So that, it can be used on any page in the application as other common components

o   component.json: This file helps to configure the parameters, methods, and events used in the custom component and exposed outside of the component

o   <name>-view.html: This file is to create the view of the component which will be the face of the custom component

o   <name>-viewModel.js: This file is to handle the logic for the components in the view

o   <name>-style.css: This file is to style the custom components with the css

Creating Reusable Custom UI Components - Input text with action buttions

 This post gives you access to one of my recent articles published on Oracle blogs.

Creating Reusable Custom UI Components in Oracle VBCS.

https://blogs.oracle.com/vbcs/post/creating-reusable-custom-ui-components

In this article, you will learn how to create a custom component with an example of input text with two action buttons Accept and Cancel. 

This article covers, how to

• create a custom component
• complete actions for the button elements on the UI
• create a custom event and pass the result value to the calling component

Warning: SelectSingle: could not fetch data for selected value

Many times you may see this warning while working in the combination of ADP (ArrayDataProvider) with SingleSelect components in Oracle VBCS or Oracle JET. 

Warning: SelectSingle: could not fetch data for selected value

In this post, we will see how to resolve this.

We get this warning when we input an ADP variable as a data value to a SingleSelect component. 

It will not give any error. However, it may not work as expected many times. 

The reason for this is, for the ADP properties, if the Data is set to "Assign Data Later", then the "Item Type" should not be blank. It is expected to bind to a "Type". Hence, define a type for the objects of ADP holdings and assign the type here. 

Difference between Array Data Provider and Service Data Provider in Oracle VBCS

 In this post, we will learn the difference between data providers available in Oracle VBCS.

A data provider is to hold a collection of data from the backend that can be bound to collection components such as listView and table on UI. In VBCS, we have two types of data providers, which are ArrayDataProvider and ServiceDataProvider.  We will see the difference between these two.

ArrayDataProvider :

• This is a static data provider which means it is a static source of data that does not change frequently
• This only allows infrequent adds, updates, and removes of the data
• In some cases, the UI component bound to this data provider needs to be refreshed after the data in its variable changes
• Operations on the data such as sorts, adds, removes or updates are managed by this data provider itself

Service Data Provider:

• This data provider represents the data that fetches from a service endpoint
• It allows externalizing fetches through an action chain
• Unlike ArrayDataProvider, this is a dynamic data provider that updates its variables and UI when the data changes through the delegated action chain
• Variable that uses this type also can be bound to collection components like listView, table, select and other components that accept the data provider. 
• This has in-built support for operations like sorting, filtering, and paging of data collection

When there will be more custom operations required to apply to the data, we should go with ArrayDataProvider as it will be static. When the data updates frequently and no major customization is required for the data, then we should choose ServiceDataProvider, especially in cases like pagination and lazy loading.