{"id":31614,"date":"2026-01-06T08:42:27","date_gmt":"2026-01-06T08:42:27","guid":{"rendered":"http:\/\/kovaion-new1.local\/creating-extensions-for-oracle-cloud-apps-using-vb-studio\/"},"modified":"2026-01-06T12:29:52","modified_gmt":"2026-01-06T12:29:52","slug":"creating-extensions-for-oracle-cloud-apps-using-vb-studio","status":"publish","type":"post","link":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/creating-extensions-for-oracle-cloud-apps-using-vb-studio\/","title":{"rendered":"Creating Extensions for Oracle Cloud Apps using VB Studio"},"content":{"rendered":"
<\/p>\n
Feature Overview<\/strong><\/span><\/h2>\n
Visual Builder Studio (or VB Studio, for short) gives you the power to customize Oracle Cloud Applications to suit your company’s specific business needs. In fact, you’ll have the exact same tools\u2014VB Studio and Oracle JavaScript Extension Toolkit (JET) that Oracle developers use to create Oracle Cloud Applications in the first place, giving you an unprecedented level of power and control over your Oracle Cloud Apps ecosystem.<\/p>\n
Extensions are what you use to deliver new capabilities into Oracle Cloud Applications. Those capabilities may take the form of customizations you make to the App’s user interface, or your extension may include things like App UIs, to deliver new pages or resources to your Oracle Cloud Applications instance. An App UI is simply an application that includes a user interface component in the form of VB Studio pages and flows.<\/p>\n
In this tutorial, we’ll create an App UI that presents employee data from an Oracle SaaS service connection, and then allows users to search for a specific employee.<\/p>\n
<\/p>\n
What Do You Need?<\/strong><\/span><\/h2>\n
\n
Access to Oracle Cloud Applications<\/li>\n
Access to Visual Builder Studio<\/li>\n
A project that is set up for extensions. If you don’t have a project available, you might need to\u202fcreate one.<\/li>\n<\/ul>\n
<\/p>\n
Steps for Implementing the Use Cases<\/strong><\/span><\/h2>\n
\n
In this step, we’ll see how to access Visual Builder Studio from Oracle Cloud Applications.<\/li>\n
Make sure that VB Studio is set up to extend Oracle applications.<\/li>\n
Log in to Oracle Applications Cloud.<\/li>\n
Click on Navigation and Open Visual Builder.<\/li>\n<\/ul>\n
<\/p>\nFig 1:<\/figcaption><\/figure>\n
<\/p>\n
\n
Create a new project and enter.<\/li>\n<\/ul>\nFig 2:<\/figcaption><\/figure>\n
<\/p>\n
\n
Provide the project name when creating a new project in Visual Builder Studio.<\/li>\n
Go to Workspaces > New > New Application Extension.<\/li>\n<\/ul>\n
<\/p>\n
Fig 3:<\/p>\n
\n
Create a new workspace.<\/li>\n<\/ul>\nFig 4:<\/figcaption><\/figure>\n
<\/p>\n
\n
Give the extension name when creating the application extension in workspaces.<\/li>\n
Choose \u201cCreate new repository\u201d and click Create.<\/li>\n<\/ul>\nFig 5:<\/figcaption><\/figure>\n
<\/p>\n
\n
Give the repository name and working branch name when created.<\/li>\n
Click on the workspace that was created.<\/li>\n<\/ul>\nFig 6:<\/figcaption><\/figure>\n
<\/p>\n
\n
Click on \u2018+\u2019 and Create APP UI.<\/li>\n<\/ul>\nFig 7: Create APP UI<\/figcaption><\/figure>\n
<\/p>\nFig 8:<\/figcaption><\/figure>\n
<\/p>\n
\n
Enter the App UI Name and App UI ID to create.<\/li>\n
Click on open.<\/li>\n<\/ul>\n
<\/p>\n
Fig 9:<\/p>\n
<\/p>\n
\n
After Creating the App UI click on Diagram > Component and Open.<\/li>\n
Once it is open you will redirect to this page.<\/li>\n<\/ul>\nFig 10:<\/figcaption><\/figure>\n
<\/p>\n
\n
Search for Heading in the filter and drag and drop the component.<\/li>\n<\/ul>\nFig 11:<\/figcaption><\/figure>\n
<\/p>\n
\n
Use the filter option under Page Designer> Components to drag and drop the values.<\/li>\n
The heading can be renamed whatever you choose.<\/li>\n<\/ul>\nFig 12:<\/figcaption><\/figure>\n
<\/p>\n
\n
Use the Text option to rename the values.<\/li>\n
Search for input text in the filter and drag and drop the component.<\/li>\n<\/ul>\nFig 13:<\/figcaption><\/figure>\n
<\/p>\n
\n
The label can be renamed whatever you want.<\/li>\n<\/ul>\nFig 14:<\/figcaption><\/figure>\n
<\/p>\n
\n
Choose Data and click (x) on the top right corner.<\/li>\n<\/ul>\n
<\/p>\n
Fig 15:<\/p>\n
<\/p>\n
\n
We have more variables under Data. So, choose the variables related to the requirement.<\/li>\n
Search for \u201csearch string\u201d and choose the Variables.<\/li>\n<\/ul>\nFig 16:<\/figcaption><\/figure>\n
<\/p>\n
\n
Navigate to Services in the top left corner and create a service connection.<\/li>\n<\/ul>\nFig 17:<\/figcaption><\/figure>\n
<\/p>\n
\n
After choosing the variables from the data you can create a service connection.<\/li>\n
Choose \u201cSelect from the catalog\u201d.<\/li>\n<\/ul>\nFig 18:<\/figcaption><\/figure>\n
<\/p>\n
\n
Choose \u201cHuman Capital Management\u201d.<\/li>\n<\/ul>\nFig 19:<\/figcaption><\/figure>\n
<\/p>\n
\n
Select \u201cWorkers\u201d and click Create.<\/li>\n<\/ul>\nFig 20:<\/figcaption><\/figure>\n
<\/p>\n
\n
In the Create Service Connection search box, enter worker, then select Workers(Workers) from the list.<\/li>\n
Click on Data and choose Services > HCMRest > drag and drop the \u201cWorkers\u201d.<\/li>\n<\/ul>\nFig 21:<\/figcaption><\/figure>\n
<\/p>\n
\n
Select the Data tab in the Page Designer and expand Services and HCMRest. Drag Workers onto the page underneath the Input Text component.<\/li>\n
In the Add Data wizard, accept the default template in the\u202fSelect Template\u202fpage and click\u202fNext<\/li>\n
Search and drag and drop the fields in slots.<\/li>\n<\/ul>\nFig 23:<\/figcaption><\/figure>\n
<\/p>\n
\n
In the\u202fBind Data\u202fpage, the Endpoint Structure panel shows all the fields that are available for us to choose from in the Workers\u202fobject. Drag and drop each of these fields from this panel to the\u202fItem Template Fields\u202fsection as specified, using the search field to help you locate them:\n
\n
Default slot: DisplayName<\/li>\n
Secondary slot: DateofBirth<\/li>\n
Tertiary slot: TownOrCity<\/li>\n<\/ul>\n<\/li>\n
Add more slots If necessary.<\/li>\n<\/ul>\nFig 24:<\/figcaption><\/figure>\n
<\/p>\n
\n
Click \u201cfilter Criterion\u201d to add a condition to the search as the display name.<\/li>\n<\/ul>\n
<\/p>\nFig 25:<\/figcaption><\/figure>\n
<\/p>\n
\n
In this section, we’re going to set up a filtering mechanism for our list, based on the display name of the employee. We want to compare each name to whatever the user enters as a search string, to find the proper match.<\/li>\n
Click preview and check.<\/li>\n<\/ul>\n
<\/p>\nFig 26:<\/figcaption><\/figure>\n
<\/p>\n
\n
We will first test the page to make sure it’s working correctly, then we can publish the application. After the application is built in VB Studio, we can view the published version.<\/li>\n
You can search for an employee\u2019s name and check the result.<\/li>\n<\/ul>\nFig 27:<\/figcaption><\/figure>\n
<\/p>\n
\n
To filter the list, enter a search criterion, like the first name\u202f\u201cVenkat Srikanth\u201d<\/li>\n
Once previewed click publish.<\/li>\n<\/ul>\nFig 28:<\/figcaption><\/figure>\n
<\/p>\n
\n
Now that you’ve confirmed the search is working, you’re ready to publish your extension with its App UI.<\/li>\n<\/ul>\n
<\/p>\n
Business Benefits of Using VB Studio for Oracle Cloud Apps Extensions<\/strong><\/span><\/h2>\n
Discover how VB Studio empowers businesses to customize Oracle Cloud Applications efficiently, enhancing productivity, agility, and decision-making with seamless integrations and low-code development. Unlock cost-effective, scalable solutions that drive smarter, data-driven operations.<\/p>\n
1. Tailored User Experiences for Enhanced Productivity:<\/strong> Visual Builder Studio (VB Studio) provides an easy, simple-to-use interface called Express mode, which\u202fhelps you tailor your Oracle Cloud Applications pages, so your end users are presented with only the data they need.<\/p>\n
2. Accelerated Time-to-Market with Low-Code Development:<\/strong> With its low-code environment, VB Studio allows teams to build and deploy extensions faster, reducing development cycles and enabling quick adaptation to changing business demands.<\/p>\n
3. Seamless Integration with Oracle SaaS Services:<\/strong> VB Studio ensures smooth integration with Oracle SaaS services like Human Capital Management (HCM) and Financials. This capability enhances data consistency and eliminates silos, resulting in more connected and insightful operations.<\/p>\n
4. Cost-Effective Customization at Scale:<\/strong> By using the same tools as Oracle\u2019s in-house developers, businesses gain enterprise-level customization without the need for expensive third-party tools or development resources.<\/p>\n
5. Enhanced Agility with Dynamic Service Connections:<\/strong> VB Studio’s capability to connect to SaaS service catalogs ensures businesses can quickly incorporate real-time data into their extensions. This agility allows them to stay competitive and responsive to market changes.<\/p>\n
6. Intuitive Design for Business Users:<\/strong> The Express Mode in VB Studio simplifies customization for non-technical users, empowering business stakeholders to make impactful changes without requiring extensive IT support.<\/p>\n
7. Future-Proofing Through Scalability:<\/strong> Extensions built using VB Studio are designed to grow with your business. The platform ensures that customizations remain compatible with future Oracle Cloud updates, reducing maintenance overhead.<\/p>\n
8. Improved Decision-Making with Data-Driven Customizations:<\/strong> By leveraging VB Studio to create data-rich user interfaces, businesses can provide their teams with actionable insights directly within Oracle Cloud Applications, driving smarter decisions.<\/p>\n
9. Streamlined Collaboration Across Teams:<\/strong> VB Studio fosters collaboration between development and operations teams through integrated project and version control features. This ensures alignment across all stakeholders during the customization process.<\/p>\n
10. Strengthened Security and Compliance:<\/strong> Oracle\u2019s robust security framework extends to VB Studio, allowing businesses to build extensions that comply with data privacy regulations and security standards without compromise.<\/p>\n
Incorporating these benefits into your operations can revolutionize how your organization utilizes Oracle Cloud Applications, delivering superior value to both users and stakeholders.<\/p>\n
<\/p>\n
Unlock the Power of Oracle HCM Cloud with Kovaion’s Custom Solutions<\/strong><\/h2>\n
Leverage Kovaion’s cutting-edge Oracle HCM Cloud solutions to enhance and customize your Oracle Cloud Applications. With the powerful Visual Builder Studio (VB Studio), including its user-friendly Express mode, you can tailor your applications’ pages to ensure your end users only see the data they need. This results in a more streamlined, efficient experience, improving productivity and decision-making. Contact us today to explore how Kovaion can help you transform your business with scalable and tailored Oracle solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"
Feature Overview Visual Builder Studio (or VB Studio, for short) gives you the power to customize Oracle Cloud Applications to suit your company’s specific business needs. In fact, you’ll have the exact same tools\u2014VB Studio and Oracle JavaScript Extension Toolkit (JET) that Oracle developers use to create Oracle Cloud Applications in the first place, […]<\/p>\n","protected":false},"author":1,"featured_media":23461,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-31614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oracle-hcm"],"acf":[],"_links":{"self":[{"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/posts\/31614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/comments?post=31614"}],"version-history":[{"count":1,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/posts\/31614\/revisions"}],"predecessor-version":[{"id":31615,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/posts\/31614\/revisions\/31615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/media\/23461"}],"wp:attachment":[{"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/media?parent=31614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/categories?post=31614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-json\/wp\/v2\/tags?post=31614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.1-Click-on-Navigation-and-Open-Visual-Builder-300x133.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.2-Create-a-new-project-Click-and-enter-300x124.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.3-Go-to-workspaces-New-New-Application-Extension-300x137.png\")
<\/p>\n![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.4-Create-a-new-workspace-300x126.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.5-Give-repository-name-and-working-branch-name-and-create-300x154.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.6-Click-on-the-workspace-that-was-created-300x115.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.7-Click-on-\u2018-and-Create-APP-UI-300x123.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.8-Enter-the-details-and-create-300x118.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.9-Click-on-open-300x118.png\")
<\/p>\n![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.10-Once-it-is-open-you-will-redirect-to-this-page-300x116.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.11-Search-for-Heading-in-filter-and-drag-and-drop-the-component-300x125.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.12-The-heading-can-be-renamed-whatever-you-choose-300x119.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.13-Search-for-input-text-in-the-filter-and-drag-and-drop-the-component-300x119.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.14-The-label-can-be-renamed-whatever-you-want-300x125.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.15-Choose-Data-and-click-x-on-the-top-right-corner-300x119.png\")
<\/p>\n![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.16-Search-for-searchstring-and-choose-the-Variables-300x114.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.17-Navigate-to-Services-on-top-left-corner-and-create-service-connection-300x115.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.18-Choose-Select-from-catalog-300x127.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.19-Choose-Human-Capital-Management-300x129.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.20-Select-Workers-and-click-create-300x123.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.21-Click-on-Data-and-choose-Services-HCMRest-drag-and-drop-the-Workers-300x117.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.22-Click-Next-300x128.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.23-Search-for-DisplayName-and-drag-and-drop-in-default-slot-300x127.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.24-Add-more-slots-If-necessary-300x128.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.25-Click-filter-Criterion-to-add-a-condition-to-the-search-as-the-display-name-300x128.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.26-Click-preview-and-check-300x122.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.27-You-can-search-for-an-employee-name-and-check-the-result-300x126.png\")
![\"\"](\"https:\/\/stage.kovaionplay.com\/stage-kovaion\/wp-content\/uploads\/2026\/01\/Fig1.28-Once-previewed-click-publish-300x161.png\")