# Step 7: Modify the JSP

In this step, you will open the new myp13n.jsp, view the code that was automatically generated for the modern content selector, and add the classic content selector to the JSP.

1. In the Portal Designer, double-click the new My Personalized Portlet. The modern.portlet file is opened in the Portlet designer.
2. Double-click the portlet in the Portlet designer. The new myp13n.jsp is opened in the JSP designer.
3. In the JSP designer, click the Source View tab. The following code should appear:

       <%--Generated by WebLogic Workshop--%>
       <%@ page language="java" contentType="text/html;charset=UTF-8"%>
       <%@taglib uri="http://www.bea.com/servers/portal/tags/personalization" prefix="pz"%>
       <%@taglib prefix="utility" uri="http://www.bea.com/servers/p13n/tags/utility"%>
       <%@taglib prefix="cm" uri="content.tld"%>

       <%-- Retrieve the content and display each node name in a list. --%>
       <pz:contentSelector rule="modern" id="nodes"/>
       <utility:notNull item="<%=nodes%>">
       <ul>
       <utility:forEachInArray array="<%=nodes%>" id="node" type="com.bea.content.Node">
       <li><cm:getProperty id="node" name="cm_nodeName" conversionType="html"/></li>
       </utility:forEachInArray>
       </ul>
       </utility:notNull>

   Notice that several JSP tags have been generated, along with their necessary tag library include statements at the top.
4. Delete the following code:
   <li><cm:getProperty id="node" name="cm_nodeName" conversionType="html"/></li>
   and replace it with this:
   <img src="<%=request.getContextPath() + "/ShowBinary" + node.getPath()%>">
5. Copy the entire code block from <%-- Retrieve the content...> to the closing </utility:notNull> tag, and paste the new code block below the block you just copied.
6. In the newly pasted code block, change the rule attribute in the <pz:contentSelector> tag to rule="classic". The JSP should now look like this:

       <%--Generated by WebLogic Workshop--%>
       <%@ page language="java" contentType="text/html;charset=UTF-8"%>
       <%@taglib uri="http://www.bea.com/servers/portal/tags/personalization" prefix="pz"%>
       <%@taglib prefix="utility" uri="http://www.bea.com/servers/p13n/tags/utility"%>
       <%@taglib prefix="cm" uri="content.tld"%>

       <%-- Retrieve the content and display each node name in a list. --%>
       <pz:contentSelector rule="modern" id="nodes"/>
       <utility:notNull item="<%=nodes%>">
       <ul>
       <utility:forEachInArray array="<%=nodes%>" id="node" type="com.bea.content.Node">
       <img src="<%=request.getContextPath() + "/ShowBinary" + node.getPath()%>">
       </utility:forEachInArray>
       </ul>
       </utility:notNull>

       <%-- Retrieve the content and display each node name in a list. --%>
       <pz:contentSelector rule="classic" id="nodes"/>
       <utility:notNull item="<%=nodes%>">
       <ul>
       <utility:forEachInArray array="<%=nodes%>" id="node" type="com.bea.content.Node">
       <img src="<%=request.getContextPath() + "/ShowBinary" + node.getPath()%>">
       </utility:forEachInArray>
       </ul>
       </utility:notNull>

   The JSP now contains both content selectors.
7. Save and close the JSP file.
8. Close the portlet file.

Click one of the following arrows to navigate through the tutorial: