Oracle Cloud Technologies

 Close any open JDeveloper instance Navigate to “C:\Users\<username>\AppData\Roaming\JDeveloper\12.2.1.4.0” or by typing “%APPDATA%\ JDeveloper\12.2.1.4.0” in file explorer Edit SetJavaHome with the new jdk version in product.conf file Save and close file and open JDeveloper, you should see the new version being reflected now

 In previous blogs we have created the Navigation Drawer App, but in some cases the Navigation flow highlight is either incorrect or there is no highlight at all. Here we will mentions steps so we can correct the same. Create a basic App with Navigation Drawer create-navigation-drawer-in-vbcs Navigate to the Webapp (testnavapp) > Variables > Create a new String variable NavSelection and give it a default value of your landing page (main). Now navigate to shell page Action for navigateToItem Custom Event, assign navigation value to the newly created Application-level variable NavSelection. Once done navigate to shell-drawer fragment and add the variable as selection in Navigation List component. Now run the application and check the result, focus should be shifted correctly as we navigate from flow to flow. Before: After:

 In this part we will write the code to navigate to different flows via the navigation bar Navigate to shell-drawer > navigation list > Create a custom Selection event. Add another variable updatedFrom in the Action and map the same to events updatedFrom value Now in action invoke the custom event navigateToItem, passing the selected value as parameter. We haven’t yet created an Event Listener for the navigateToItem event, lets create the same below. Navigate to shell page and create an Event listener for the event navigateToItem. Now Navigate to the created Action Chain and add a switch component with Item Parameter as the switch value. Now add multiple Navigate components to multiple branches of switch so the selection will navigate to corresponding flow. Now run the Application and check to see if the navigation is happening correctly or not. We can see that the navigation is happening correctly, now as a final step lets collapse the Navigation bar on component seletion. G...

Create a sample application which picks file and stores the same as Base64 data Invoke below function to download the given file PageModule .prototype.fileDownload = function (mimeType,base64Data,fileName){       let file = 'data:' + mimeType + ';base64,' + base64Data;       let encodedFile = encodeURI(file);       let link = document.createElement( 'a' );       link.setAttribute( 'href' , encodedFile);       link.setAttribute( 'download' , fileName);       link.click();     }; Note : This function has been tested with below Mime Types Extensions Mime Type FileName CSV text/csv Test.csv DOC application/msword Test.doc DOCX application/vnd.openxmlformats-officedocument.wordprocessingml.document Test.docx HTML text/html Test.html JPG image/jpeg Test.jpg PDF appl...

Create a Sample WebApp Navigate to resources and create a sample JSON and JS file Navigate to webApp Json Tab and paths give a short name to the given path as shown in below Now we can access the location and the files contained withing the path in our custom JavaScript code define([ "text!test/data.json","text!test/new-data.json" ,"test/download_file" ], (jsonDataStr,newjsonDataStr,download_file) => {   'use strict' ;   class PageModule {   }   let jsonData = JSON .parse(jsonDataStr);   let newjsonData = JSON .parse(newjsonDataStr ) ;

 In this part we will create another Page Fragment to create and style our custom Navigation List component Create a new page Fragment shell-drawer, this will have our Navigation List Drag and drop custom Navigation List into the fragment Note: here we will be showing static Navigation List, for dynamic list you can modify the application as per below blog Dynamic Navigation List Modify the list to have our custom flows, also set drill mode to sliding, below is the complete code for the same. Add Drawer Layout to Shell page and make sure all the components are withing the Drawer Layout and the shell-drawer Fragment is added to the same Now run the Application to see if the Navigation Drawer is displaying correctly or not If the applications look and feel is not as per the displayed page then it should be missing some css classes, at the end of the blog I will attach all the classes used for the same