How to create a loading screen on WebCenter Portal

Prepare the template

1. Open the page template where you want to add a loading screen
2. Position yourself in an element that will be rendered for first (for example a panelGroupLayout or a panelStretchLayout
3. Inside this element, create a new panelGroupLayout. This will be the container of your content portal and the loading screen
4. Inside this new container, add two nested panelGroupLayout.
   
   • The panelGroup parent will have an id="pslload", a styleClass="loader" and an inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;".
   • The panelGroup child will have a styleClass="loaderSpinner" and an id="pglSpinner".
5.  Add to the container of your content portal this inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"

<af:panelGroupLayout id="containerLoad">

    <af:panelGroupLayout id="pslload" styleClass="loader"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;">

        <af:panelGroupLayout id="pglSpinner" styleClass="loaderSpinner"/>

    </af:panelGroupLayout>

    <af:panelStretchLayout id="pt_psl2" startWidth="300px"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">

        <f:facet name="center">

            -- your content portal here --

        </f:facet>

    </af:panelStretchLayout>

</af:panelGroupLayout>

 Add the javascript

1. In your template, add this script in the top of your page

   <af: resource>

       function loadScreen() {

           const loader = document.querySelector(".loader");

       //console.log(loader);

       if(!loader){

           setTimeout(loadScreen, 500);

       return;

           }

       loader.classList.remove("af_panelGroupLayout");

       loader.classList.add("loader-hidden");

           loader.addEventListener("transitionend", () => {

           loader.remove();        

           });

       }

   
   

       window.onload = loadScreen();

   </af: resource>

Create the css classes

1. Open the skins section
2. Open the portal's skin you want to edit
3. Add these classes inside your sheet

.loader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vw;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #f7f9fb;

    transition: opacity 0.75s, visibility 0.75s;

}

.loader-hidden {

    opacity: 0;

    visibility: hidden;

}

.loaderSpinner {

    content: "";

    position: fixed;

    top: calc(50vh - 38px);

    width: 75px;

    height: 75px;

    border: 15px solid #dddddd;

    border-top-color: #02254f;

    border-radius: 50%;

    animation: loading 0.75s ease infinite;

}

@keyframes loading {

    from {

        transform: rotate(0turn);

    }

    to {

        transform: rotate(1turn);

    }

}

 

How to create a LOV with null value based on a VO

 

Create a properties file 

1. Right click on a folder in the view controller
2. Select new and choose "File"
3. Name the new file and add the .properties extension
   
4. In this new file, insert an entry with an id and a value, this entry will be the null selectable value in the LOV

Create a variable

1. Go to the page definition file and right click the "Variables" in the "Executables" section
2. Select "Insert inside variableIterator"
3. Select "Variable"
4. Set a name and set the type as "java.lang.String"
   
5. Create the binding based on the new created variable
6. Select the add in the "Bindings" section
7. Select "Attribute Value", set as datasource the "Variables" section
8. Select the new created variable and press ok
   

 Create the select one choice based on VO

1.  In a Jsff fragment, drag and drop an instance of the View Object, select "Single Selection" and then "ADF Select One Choice"
2. A window will appears where you can select which attribute to display, select "Ok"
3. Remove the validator and the required attribute
4. Add the attributes autosubmit="true" and immediate="true"
5. Replace the default inputValue with the new created variable
   

 

Adjust settings' LOV

1. Open the page definition source from the fragment
2. After the tag <bindings></bindings> add this code and modify the property "PropertiesFile" with the correct path of the previous created file
   
   
   <ResourceBundle>
       <PropertiesBundle xmlns="http://xmlns.oracle.com/adfm/resourcebundle" PropertiesFile="path.properties.file"/>
   </ResourceBundle>
   
   
3. Select the LOV in the page definition file and in the Properties tab edit the attribute "ListOperMode" to "setAttribute"
4. Edit the "NullValueId" attribute. This attribute defines the id that needs to be read in the previous properties file.
   
5. Ediit the "NullValueFlag" attribute to "start". This attribute defines the position of the null value in the LOV.
   
    

To create a LOV with null value avaiable but required input, we need to modify the selectOneChoice adding these attributes:
showRequired="true"
immediate="true"

If no selection was made on the LOV and the user wants to commit, we need to add a warning popup specifing to select a value on the LOV.
This check can be made by checking if the inputValue in the selectOneChoice is not null.