Visual Builder

Get Involved. Join the Conversation.

Topic

    Rajeev Singh
    Remove the header title bars and navigation from the VBCS...
    Topic posted September 20, 2019 by Rajeev SinghRed Ribbon: 250+ Points, tagged SaaS Integration 
    61 Views, 8 Comments
    Title:
    Remove the header title bars and navigation from the VBCS application
    Summary:
    Remove the header title bars and navigation from the VBCS application
    Content:

    Hi,

    I have embedded my VBCS App in Oracle Fusion. How can I remove the header title bars and navigation from the VBCS application. it tried passing URL parameter nonav in the embed URL. But it does not work. I used below video as reference.

    https://www.youtube.com/watch?v=HyGJ2paYrcw&feature=youtu.be&t=156

    Also the embedded vbcs app is getting rendered in a very limited space inside SaaS. it adds a scrollbar at the right side.

    Version:
    19.3.1.1
    Code Snippet:

    Comment

     

    • Duncan Mills

      The nonav stuff applies to the older "Classic" applications not the newer Visual Applications that you will be using. 

      For visual applications you just need to define a shell page without any chrome and embed your main flow into that. 

      • Rajeev Singh

        Hi Mills,

         

        I am using the default template that comes with the VBCS App. That already has the shell page.

         

        <!--
         Copyright (c) 2014, 2018, Oracle and/or its affiliates.
         The Universal Permissive License (UPL), Version 1.0
         -->
        <div id="page" class="oj-web-applayout-page">
          <header role="banner" class="oj-web-applayout-header ApplicationsCloudUI-watermark">
            <div class="oj-web-applayout-max-width oj-flex-bar oj-sm-align-items-center">
              <div class="oj-flex-bar-start">
                <img id="img--38590647-1" :src="{{ $application.path + 'resources/images/oracle-blk.png' }}" alt="oracle logo" height="36px">
              </div>
              <div class="oj-flex-bar-middle oj-sm-align-items-baseline">
                <!-- Logo can go here -->
                <!--img src="" alt="Company Logo"></img-->
                <h1 class="oj-sm-only-hide oj-web-applayout-header-title" title="Application Name">
                  <oj-bind-text value="My Application"></oj-bind-text>
                </h1>
              </div>
              <div class="oj-flex-bar-end">
                <oj-toolbar id="toolbar1">
                  <oj-menu-button id="userMenu" display="[[$application.responsive.SM_ONLY === false ? 'icons' : 'all']]" chroming="half">
                    <oj-bind-text value="[[ $application.user.email ]]"></oj-bind-text>
                    <span slot="endIcon" css="oj-component-icon oj-button-menu-dropdown-icon"></span>
                    <oj-menu slot="menu" id="menu1" style="display:none">
                      <oj-option id="out" value="out">Sign Out</oj-option>
                    </oj-menu>
                  </oj-menu-button>
                </oj-toolbar>
              </div>
            </div>
            <div class="oj-flex-item oj-sm-justify-content-center oj-sm-align-items-center oj-flex-bar">
              <oj-navigation-list id="ApplicationsCloudUI-navigation-list-main" class="oj-sm-condense oj-navigationlist-stack-icon-label oj-flex-bar-middle oj-sm-justify-content-center" edge="top" overflow="popup" on-selection-changed="[[$listeners.ojNavigationListMainSelection]]">
              <ul>
                <li id="main">
                  <a href="#">
                  <span class="oj-navigationlist-item-icon vb-icon vb-icon-home"></span>Home
                  </a>
                  <span class="ApplicationsCloudUI-menu-selection-indicator" id="span-1084591017-1"></span>
                </li>
                <li id="flow2">
                  <a href="#">
                  <span class="oj-navigationlist-item-icon vb-icon vb-icon-people-two"></span>Flow2</a>
                  <span class="ApplicationsCloudUI-menu-selection-indicator" id="span-1084591017-2"></span>
                </li>
                <li id="flow3">
                  <a href="#">
                  <span class="oj-navigationlist-item-icon vb-icon vb-icon-tools-wrench-screwdriver"></span>Flow3</a>
                  <span class="ApplicationsCloudUI-menu-selection-indicator" id="span-1084591017-3"></span>
                </li>
              </ul>
              </oj-navigation-list>
            </div>
          </header>

          <!-- for message notifications -->
          <oj-messages id="vbDefaultNotifier" position="{}" display="general" messages="{{$page.variables.messagesADP}}" on-oj-close="{{$listeners.onMessageClose}}"></oj-messages>

          <div class="oj-web-applayout-content-nopad oj-web-spacing oj-web-applayout-max-width">
            <div class="oj-web-applayout-content oj-flex oj-flex-items-pad">
              <!-- Where Visual Pages will be rendered -->
              <oj-vb-content id="vbRouterContent" class="vbcs-pages-module oj-flex-item" config="[[vbRouterFlow]]"></oj-vb-content>
            </div>
          </div>
          <footer class="oj-web-applayout-footer" role="contentinfo">
            <div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
              <ul>
                <li><a id="about" href="">About</a></li>
              </ul>
            </div>
            <div class="oj-web-applayout-footer-item oj-text-secondary-color oj-text-sm oj-web-applayout-max-width">
              Created with Visual Builder, Copyright © 2018
            </div>
          </footer>
        </div>

    • Duncan Mills

      Yes so create a new shell page without the header and the footer bits but including the 

            <!-- Where Visual Pages will be rendered -->
            <oj-vb-content id="vbRouterContent" class="vbcs-pages-module oj-flex-item" config="[[vbRouterFlow]]"></oj-vb-content>
          </div>

      Bits. Just copy the existing shell and then edit. 

      Then in the WebApp settings panel - change the default page from shell to your new page 

    • Rajeev Singh

      Hi Mills,

       The embedded vbcs app is getting rendered in a very limited space inside SaaS. it adds a scrollbar at the right side. it looks as if height is set as 300px .  I have added my VBCS app as a page entry in Supplier Portal

      But when i run the application from VBCS, everything is fine. My main page has two oj-accordion.

      main-start code -

      <oj-accordion id="oj-accordion-1084591017-3">
        <oj-collapsible id="oj-collapsible-1084591017-3" expanded="false" style="margin-bottom: 8px;border-style: solid;border-color:#FF0000;border-width: thin;border-radius: 5px">

      </oj-collapsible>
      </oj-accordion>

       

      Shell Page - 

      <div id="page" class="oj-web-applayout-page">
        
       <!-- for message notifications -->
        <oj-messages id="vbDefaultNotifier" position="{}" display="general" messages="{{$page.variables.messagesADP}}" on-oj-close="{{$listeners.onMessageClose}}"></oj-messages>
            <!-- Where Visual Pages will be rendered -->
            <oj-vb-content id="vbRouterContent" class="vbcs-pages-module oj-flex-item" config="[[vbRouterFlow]]"></oj-vb-content>
         
       
      </div>

       

    • Duncan Mills

      Well if your target environment (the iframe) is fixed to a particular size then you will have to account for this in the application that you put together in Visual Builder - e.g. constrain it to the same sizing or at least make sure that it can adapt to the space. 

      This chapter in the doc should prove to be useful: https://docs.oracle.com/en/middleware/developer-tools/jet/7.1/develop/designing-responsive-applications.html

      • Rajeev Singh

        Hi Mill,

        How do I check the iframe size of my target page? How do I make shell or main page to adapt to the space?

         

    • Duncan Mills

      To make a page responsive (ie.Adapt to the size / shape of screen that you are given you can use the CSS Flex-box styling.  This is talked about in the documentation ref I provided: https://docs.oracle.com/en/middleware/developer-tools/jet/7.1/develop/designing-responsive-applications.html 

      But you will also need to do some further general reading around the topic in generic terms - i.e. it's a general web development issue not a Visual Builder or JET specific thing