Show TOC

Function documentationDynamic Product Images Locate this document in the navigation structure

 

You can provide users of interactive configuration in the Web-based configuration UI with a dynamic product image. This image represents the selected product options in a two-dimensional graphic. You can assign image elements to predefined values of symbolic characteristics: When the user selects the respective value, the image element appears in the dynamic product image area of the configuration user interface.

This section describes how to integrate a dynamic image for a configurable product that is configured with the Web-based configuration user interface.

Note Note

To display the dynamic product image during interactive configuration, you need to activate the user interface parameters that control the dynamic product display.

End of the note.

Features

Conceptual Overview

The dynamic product image is composed of two types of elements that are provided with the standard Web-based user interface for interactive configuration:

  1. The background image (elements) are displayed in a background window.

  2. Image elements are assigned to values of symbolic characteristics and displayed when the respective product option (or the corresponding characteristic value) is selected.

Besides assigning image elements to characteristic values, you can also control the following with the maintenance steps below: back-to-front sequence of all image elements, positioning in the background window, and zoom functions.

You can enhance the function, for example, by assigning further image elements like texts or user interactions (clickable elements).

Product-Specific Image Composition

You need to provide a JSP file that can be accessed via the user interface for every configurable product (or component) with a dynamic product image (in other words, the Web application on the SAP Java Application Server).

File Name

<productName>.jsp

Storage Location

<webAppRoot>/ipc/templates where <webAppRoot> is the root directory of the Web application

This file contains the following elements:

  • JSP code wrapping to insure the integration of the standard JSP coding for dynamic product images

  • Four Java string arrays with entries for each image element to define:

    • Characteristic value that triggers the image element

    • Storage location (path and file name) of the image element

    • Positioning information to place the element on the background window

    • Sizing information for the image element

  • Background element definition with any information about the static part of the dynamic product image

The JSP code wrapping is static, meaning that it is the same for each product:

<%@ page import="java.util.*, com.sapmarkets.isa.ipc.ui.jsp.action.RequestParameterConstants" %>

<%@ taglib uri="/isa" prefix="isa"%>

<%

<include image elements section here>

%>

<include background section here>

<%@ include file="/ipc/dynamicProductPictureShow.jsp" %>

The image element section is composed of four Java string arrays: Entries with the same index correspond to the respective image element; the sequence of the image elements in the arrays (increasing index k) is from background to foreground.

  • imgId: Assignment of a characteristic value to an image element; each entry is constructed as follows:

    imgId[k] = "<csticName>.<valueId>";

    where:

    <csticName> is the language-independent name of the symbolic characteristic;

    <valueId> is the language-independent name of the characteristic value.

  • imgSrc: the source or location (path and filename) of an image element; each entry is constructed as follows:

    imgSrc[k] = "<relativePath>/<fileName>";

    where:

    <relativePath> is the directory path relative to the Web root directory (case sensitive);

    <fileName> is the file name (including extension) of the image element.

  • imgStyle: The positioning information for an image element; an entry can be constructed as follows:

    imgStyle[k] = "position:absolute; top:<ny>px; left:<nx>px; width:<nw>px;visibility:visible";

    where:

    <ny> is the number of pixels from the top edge of the background window;

    <nx> is the number of pixels from the left edge of the background window;

    <nw> is the number of pixels to be used for the width of the image element.

    Note Note

    The style parameter will be transferred to the style attribute of the HTML tag div; any style information that can be edited using the div tag can be used here.

    End of the note.

  • imgSize: The sizing information for an image element; each entry is constructed as follows:

    imgSize[k] = "width=\"<nx>\" height=\"<ny>\"";

    where:

    <nx> is the number of pixels to be used for the width of the image element.

    <ny> is the number of pixels to be used for the height of the image element.

For the definition of the background element, you can use a div tag, which contains information that is used for the static rendering of the background window of the dynamic product image.

Example Example

For the product C_PC, the definition of the dynamic product image is in file C_PC.jsp (an example that is part of the IPC installation). This example illustrates how the allocation of the string arrays might be done. (An extract of the three image elements is included here):

End of the example.

Syntax Syntax

  1. <%@ page import="java.util.*, com.sapmarkets.isa.ipc.ui.jsp.action.RequestParameterConstants" %>
  2. <%@ taglib uri="/isa" prefix="isa"%>
  3. <% int k=23;
String[] imgId=new String[k];
String[] imgSrc=new String[k];
String[] imgStyle=new String[k];
String[] imgSize=new String[k];
  4. k = 0;
  5. imgId[k] = "C_PC_FLEXDISK.C_PC_FLEXDISK_A";
  6. imgSrc[k] = "/ipc/lib/images/CampusPC/05_Floppy.gif";
  7. imgStyle[k] = "position:absolute; top:32px; left:5px; width:200px; visibility:visible";
  8. imgSize[k] = "width=\"355\" height=\"480\"";
  9. k = k + 1;
  10. imgId[k] = "C_PC_FLEXDISK.C_PC_FLEXDISK_C";
  11. imgSrc[k] = "/ipc/lib/images/CampusPC/06_DAT.gif";
  12. imgStyle[k] = "position:absolute; top:32px; left:5px; width:200px; visibility:visible";
  13. imgSize[k] = "width=\"355\" height=\"480\"";
  14. k = k + 1;
  15. imgId[k] = "C_PC_FLEXDISK.C_PC_FLEXDISK_B";
  16. imgSrc[k] = "/ipc/lib/images/CampusPC/07_ZIP.gif";
  17. imgStyle[k] = "position:absolute; top:32px; left:5px; width:200px; visibility:visible";
  18. imgSize[k] = "width=\"355\" height=\"480\"";
  19. %>
  20. <div id="Background"style="position:absolute; top:0px; left:0px; width:380px; visibility:visible">
  21. <img src='<isa:mimeURL name="ipc/lib/images/CampusPC/00_Pc.jpg>"/'width="380" height="500">
  22. </div>
  23. <%@ include file="/ipc/dynamicProductPictureShow.jsp" %>
End of the code.

List of Products Supporting Dynamic Images

You need to make a list of the products for which a dynamic product image can be called up using the user interface instance (such as the file <productName>.jsp in the example above, which you can use).

The definition is made in file:

<webAppRoot>/WEB-INF/ipc/dynamicProducts.xml

where:

<webAppRoot>

is the root directory of the Web application on the SAP Java Application Server.

This file contains a productlist tag with a variable number of product entries that follow this template:

<productlist><list_of_product_entries></productlist>

where:

<list_of_product_entries>

is a result of product entries that follow this template:

<product><productName></product>

where:

<productName>

is the language-independent name of the product.

Example Example

List of three products

End of the example.

Syntax Syntax

  1. <productlist>
  2. <product>WP-940</product>
  3. <product>C_PC</product>
  4. <product>C_PC_CF</product>
  5. </productlist>
End of the code.