VBCS

 https://www.udemy.com/course/learn-vbcs-from-scratch/learn/lecture/32770288#overview

• docs.oracle.com/en/cloud/paas/integration-cloud/visual-developer/get-started-visual-builder-cloud-service.html
• Webapp
• Task flows
• Pages
• Fragments
• shell-footer
• shell-header
• Resources
• 
  
• Root Pages
• shell

Service Data Provider

• filterCriterion
• add one static condition
• Button action chain
• Assign Variable
• search params -> SDP uri Parameters -> q  (query param)
• "id like '%" + $page.variables.vcriteria.employeeId + "%'  and salary < " + $page.variables.vcriteria.salary
• Using JavaScript
  
  PageModule.prototype.getSearchQueryParameter = function (srCriteria, customerCriteria, statusCriteria, assigneeCriteria, purposeCriteria) {

      let queryParam = '';

      if (srCriteria !== undefined && srCriteria !== null && srCriteria !== "") {

        queryParam += "sr LIKE '%" + srCriteria + "%'";

      }

      if (customerCriteria !== undefined && customerCriteria !== null && customerCriteria !== "") {

        if (queryParam != "") queryParam += ' and ';

        queryParam += "customer LIKE '%" + customerCriteria + "%'";

      }

      if (statusCriteria !== undefined && statusCriteria !== null && statusCriteria !== "") {

        if (queryParam != "") queryParam += ' and ';

        if (statusCriteria =='Closed') queryParam += "status LIKE '%" + statusCriteria + "%'"; else

        queryParam += "status NOT LIKE '%Closed%'";

      }

  
  

      if (assigneeCriteria !== undefined && assigneeCriteria !== null && assigneeCriteria !== "") {

        if (queryParam != "") queryParam += ' and ';

        queryParam += "assignee LIKE '%" + assigneeCriteria + "%'";

      }

  
  

      if (purposeCriteria !== undefined && purposeCriteria !== null && purposeCriteria !== "") {

        if (queryParam != "") queryParam += ' and ';

        queryParam += "purposeOfReview LIKE '%" + purposeCriteria + "%'";

      }

  
  

      if (queryParam == "") queryParam += "sr LIKE '%%'";

  
  

      return queryParam;

    }
• assign javascript output to SDP uriParameters.q

Progress Bar

• Drop dialog component at the end of the UI page
• It has 2 slots -> body & footer
• remove cancel button on dialog
• select Cancel behavior as icon
• Drag and drop Progress Bar to dialog component. Mark id & value as -1
• Drag "call component" to action chain and select the dialog component & method as Open
• Drag "call component" to action chain and select the dialog component & method as Close

Hyperlink

• Make the Selection Mode-Row as single for table
• Add "template: <name>" attribute to column where hyperlink to be shown
• define <template slot = "<name>"
• Drag and drop link into the template tag and set value as [[$current.data]]
• hyperlink -> onclick event -> call component -> select dialog with method open -> 

Export Data to CSV

• Components -> Browse -> search for Export -> Export Data -> install
• Drag export component & drop on page -> provide DataSource -> select fields for export

Shell Page

• shell
• <oj-vb-fragment id="shell-header">
  <oj-vb-content id="shell-header">
  <oj-vb-fragment id="shell-footer">
• add company logo
• shell-header
• drag Image component -> upload image under data tab(First copy it to Resources /images). Set height & width appropriately using style attribute
• Icons in header
• create Array of Objects with data having fields id, name, class
• create ArrayDataProvider 
• <oj-toolbar id="toolbar1">
      <oj-bind-for-each data="[[$application.variables.globalHeadersADP}}">
           <template>
                <div>
                     <oj-button display="icons">
                         <span :class="[[$current.data.iconClass]]" slot="startIcon"></span>
                          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
                      <oj-button>
               </div>
               </template></oj-bind-for-each>
• Button Action chain
• create input variable -> buttonName
• pass the value from oj-button event action

Business Rules 

• Object Trigger
• Similar to Events
• Before insert/update/delete
• Create Trigger 
• provide criteria (execute always/conditionally/custom code) 
• add conditions 
• add actions (send email/workflow/....)

New Page

• <div>
• <validation group>
• <form layout>
• relation filed
• collection template
• hiredate
• min -> oj.IntlConvertUtils.dateToLocalIso(new Date())
• max -> java script function
• return newDate().setDate(new Date().getDate+30))
• oj.IntlConvertUtils.dateToLocalIso(new Date($function.maxDate()))

Navigation Bar

• shell
• drop navigation list component  with edge as Top
• add selection event on navigation list
• add if conditions based on $variables.selection - compare with iconClass name
• then navigate to flow/page

Embed Google Maps in VBCS

• Drag grid container to page
• From google maps -> copy iFrame for embedding

Embed Visual Builder page in SaaS/Fusion with Page Integration

• Fusion Instance -> Menu -> Configurations -> Sandboxes -> select Structure(for moving embeded webpage from one category to another), page Integration(to embed vbcs page), page Composer(change size of webpage) -> create and enter
• Navigator -> configurations -> page Integration-> new page -> enter details(name, role, webpage Link)
• Move page from one category to another category
• navigator -> configurations -> Structure -> select old category where page was assigned -> select your page -> Move to another group(Me) -> 
• Signout -> signin -> me 
• To adjust the size of embeded page
• profile icon -> edit pages ->  Structure tab -> select the section -> edit -> config icon at bottom -> content style -> provide required height-> close 
• We can pass JWT token along with url by appending ?JWT=#{applCoreSecuredToken.trustToken}
• shotcut to url
• setup and maintenance -> search -> manage content-> Manage Integration of addtional Applications -> add the integrations

Decode JWT token in vbcs

• Web Application level
• Create a variable JWT at application level
• enable and select pass on URL
• main flow
• java script -> AppModule.prototype.decodeTokenJWT = function(token){
                          return JSON.parse(atob(token.split('.')[1]))['prn'];
                    };
• vbEnter (to decode JWT function before entering into flow)
• check if JWT page variable is empty or not
• callJSFunction to get user name from JWT
• validate the userName against HCM service
• if response is not null then navigate to main-start page
    else unauthorized user page

Upload file to OCI bucket

• Log into OCI -> create bucket with Public visibilty
• Create service connection with OCI rest end point
• Use authentication as "Oracle cloud infra API signature 1.0"
• provide api key(tenancyocid/userocid/fingerprint)
• private key 
• New page
• file picker component
• on selected files event 
• 
  
• button
• Avatar
• Invoke rest api in event listner

•