Posted on

Display UCM files in ADF/Webcenter application as images or link

Requirement- Display UCM images on the page or as link, so that user click of that image and can open in new window

Implementation – You can also have my previous videos to make connection between portal and content and other video Content Presenter in Webcenter Portal
or Content Integration Using Folder viewer in Webcenter Portal .

But if you really want to display your ucm image or show as link for your images or document then you follow below approach
Taking scenario if you don’t how many documents are there.then for that case use below approach

You can use af:image or af:goLink component to put the below url as source or destination

#{WCAppContext.applicationURL}/content/conn/contentserver/uuid/dDocName%3a#{contentId}

#{WCAppContext.applicationURL} = This will return the url with full context till port number = abc.com/7001/yourPortal

contentserver- is connection name to the UCM.

content id = is the content id of the document.

Displaying as link

Image-001

ssdsds-2
Final output would be like below

sdsdsd

Happy Learning by Vinay in techartifact….

Posted on

skinning of af|panelTabbed in Oracle ADF

With chain of article of ADF skinning i.e. skinning of af:panelBox in Oracle ADF and !important CSS Declarations: How and when to use in ADF Skin. Today i will talk about skinning of panelTabbed

Requirement – To do skinning of panelTabbed in ADF.

Solution- For this, you have to understand this component .Header section contains three part
-> tab-start
-> tab-content
-> tab-end
try below code in your skin file and you can skin your panelTabbed . I am pasting below code for your skin file and explain what all this code is doing

/*it will be applied on header of tab*/
af|panelTabbed::header
{
  background-color:  transparent;
  border: none;
  
}

/*it will be applied on selected header of tab*/
af|panelTabbed::header:selected
{
  background-color:#233977 ; 
  color: White;
   border: none ;
   border-color:transparent ;
  
}

af|panelTabbed::tab-start, af|panelTabbed::tab-end,  af|panelTabbed::tab:hover af|panelTabbed::tab-start, af|panelTabbed::tab:hover af|panelTabbed::tab-end  {
    background-image:none !important;
   background-color:#233977  !important;
   color:#233977  !important;
   border: none ;
   border-color:transparent; 
}


af|panelTabbed::tab:selected af|panelTabbed::tab-content, af|panelTabbed::tab:selected:hover af|panelTabbed::tab-content {
  background-color:#233977 ;
  color:White;
  background: none;
   border: none ;
   border-color:transparent; 

}
af|panelTabbed::tab:hover af|panelTabbed::tab-content {
     background-color: #C3E0F2; ;
     background: none ;

}

/*it will be applied on text in tab of panelTabbed */
af|panelTabbed::tab af|panelTabbed::tab-text-link {
    font-size:14px;
    font-weight:bold;
    color:#233977 ;
    line-height:16px;
} 

/*it will be applied on text in selected tab of panelTabbed */
af|panelTabbed::tab:selected af|panelTabbed::tab-text-link {
    color:White;
    border: none;
    font-size:14px;
    font-weight:bold;
    line-height:16px;
}


af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-content, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-content
{
background-color: #233977 ; background-image:none;
color: White;
border: none;
}


af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-end, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-end
{
background-color: transparent; 
 background-image:none;
}



af|panelTabbed::tab:selected af|panelTabbed::tab-content{
  border: none;
}
af|panelTabbed::body {
    background-color: #233977 ; 
    color: White; 
    border: thick ;
}

Final output is like below picture

Image 1

happy learning with Vinay in Techartifact…