Configure Web Center Content in Jdeveloper to leverage Out of Box Web Center Functionality Part-II – Content Server in ADF Pop UP

By rajesh | October 4, 2013 | 0 Comment

Here again to take you forward in webcenter services using jdeveloper.

So, ensure you have followed the earlier post to get a successful configuration of content server in jdeveloper :

http://smconsultant.com/configure-web-center-content-in-jdeveloper-to-leverage-out-of-box-web-center-functionality-part-i#comment-4993

We have a successful connection to our repository and have configured the folder_g component in Oracle Webcenter Content server[Do not forget the difference between folder_g and frameowork folders components].

What you will have now in jdeveloper, will look something like this :

1

 

Now, Let’s take few scenarios like :

1)      How to convert a static Document Link in Image Link.

2)      How to open document on click on this image in Pop Up.

Let’s take all these two  scenarios in a sequence, one by one.

Target is to get a specific Content Server document in an ADF Pop up.

And to achieve the same I am incorporating this case with an active image ADF component.

And, this ADF image will come from an ADF go link which we generate with the help of a document from the contribution folder which will be visible only when you have a successful connection to your repository in jdeveloper.

So, very basic and important steps, to create application and the JSF page.

 

Create an application based on the Webcenter Portal Framework available in your jdeveloper, just to add, your jdeveloper version should be 11.1.1.4.0 or above.

2

Choose your framework and go ahead.

You will get two projects for your Model[business logic] and your views and controller part.

Only one major point to remember here is to check the option for grant permission to all the objects you will create from now onwards as in this framework, you will get default security enabled.

If you want to only view your further objects, you need to check this option here only. Follow this screen shot :

3

Finish with the application now and let’s see all these data controls which you will get as default :

4

Now, let’s focus on our main area, Contribution Folders.

Go to your Application Resource tab in the application and unplus all the links of folders present there :

5

 

So, To start with create a JSF page where we will drag and drop all these documents and folders in different  ADF components.

To start for a basic page, choose default page layouts present in the framework, follow the screen shot :

6

One catch here, in context of default ADF security enabled in your application.

If at all you want to play something different other than just viewing the future objects on JSF page, modify the security level on the page.

Right Click on the page and go to authorization of the page like this :

7

Choose your object in your Jazn-data.xml file, this file is responsible for your ADF security model, we will explore the ADF security in another Detailed post with some other security models.

For now, just choose your object, in this case your JSF page, select the user and then check all the permissions which you want your user will be able to do on this page.

Follow this screen shot :

8

 

Now, the main deal, explore the contribution folder in application resource and unfold the exact folder.

Take the document which you want to expose as a go link on your portal.

Drag and drop the specific document from contribution folder on the JSF page as an ADF go link,

Follow this screen shot to achieve the same:

9

For now, the document name will come as a Go link text, have a look at the properties of this go link :

10

Now, an easy task, we need to convert this go link into an image.

Seems to be an easy one but it will the base of your Pop up, parent container for your pop up behavior.

So, right click on the ADF go link and choose the option of “convert into”.

See this :

11

This option will give you menu for all those ADF components, in which you can convert this go link into.

Now, choose image component out of these available components.

This would not change anything but few options in the property inspector.

See this.

12

Have a look at the Property Inspector.

13

In this view, now you will get the options to attach icon of your choice to this ADF go link.

What I will do now, no wonder, I will choose any image of my choice in the icon attribute for this component in the property inspector.

Choose one, and run the page for this moment.

What you have done so far, let’s summarize now :

1)    Application creation and JSF page.

2)    UCM document on JSF page as a go link first and then convert it into image link.

And what we have left with :

We will create a pop up and will use show pop up behavior of our ADF image link and will link them together and we will be done for now.

So, see this shot :

14

So, if you click on this image link, your document will get open in another tab.

Now, let’s create a container for our image link which we will link with the pop up afterwards.

How, very easy.

Go to component Palette. In there go to ADF faces, and in there go to Operations section.

You see, Show popup behavior.

That is our component.

Drag and drop this on your image link. Like this.

15

Now see the structure window, you will see a show pop up behavior.

16

 

Now, we just need to link this behavior to our Pop up.

So, our last step will be to create a pop up and definitely we will use one of the contribution folder’s document in this pop up.

Let’s start creating a pop up on our JSF page.

Again go to component palette, and in common components.

There you will find pop up component. Just drag and drop this anywhere you want on JSF page.

See this :

17

Your pop up container will get opened.

Now, you can design this pop up as per your requirement.

What our post topic says, is to consume contribution folder in this pop up.

So, now, again go to application resources and unfold your UCM connection.

Then drag and drop your contribution folder on this pop up.

See this :

18

Drop one of the document which you want to render in pop up as in ADF inline frame.

What you will see in pop up, your complete document.

Now, our final step will be to link our show popup behavior and this pop up.

How will we achieve this. Let’s find out.

Choose your show pop up behavior from structure window and go to the property palette. And you will find all available properties.

Very first step would be to choose the pop up ID, see this :

19

By clicking on edit option, you will see all components which are there present on your JSF page.

Follow this screen shot and choose ID of the pop up :

20

Set other properties as well as per your requirement and finally,

Properties for this show popup behavior looks something like this :

21

You will be good to go from here now,

Run your page again and you will see the trick.

22

This is your ADF image link.

Which have a show popup behavior.

We have another pop up which have a document as an ADF inline frame.

Now, click on the ADF link and you will get your document in pop up.

23

This is it, implement and use it as per your requirement.

Here is sample application:

UCMDocumentInPopUP

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *