Image in table dynamically , How?

[Former Member]

Hi Experts

I have some requirement to display different image in table based on value attributes. I would be thankfull if some one can help me how to do this programically.I promise to sward points.

Thank you

Maruti

[former_member186016 · Accepted solution]

Hi,

Create a context attribute "ImageURL"

In the table make the cell UI element as Image. Bind the context attribute "ImageURL" to it.

In the mimes folder under component package place all your images e.g. image1.jpg,image2.jpg ..

At runtime populate the context attribute by

 WDURLGenerator.getResourcePath(wdComponentAPI.getDeployableObjectPart(),"image1.jpg"); 

OR

 WDURLGenerator.getResourcePath(wdComponentAPI.getDeployableObjectPart(),"image2.jpg"); 

Regards,

Ashwani Kr Sharma

[Former Member · Accepted solution]

Hi Ashwani,

Thank you for your quick reply. I am trying your code but I seam to miss some thing. Could you please look at it for a movement. I tried the code following code

sqlr3element.setImageURL(WDURLGenerator.getResourcePath(wdComponentAPI.getDeployableObjectPart(),"Green.jpg"));

sqlr3element --> Value node

setImageURL--> Value Attribute

Following is the result displayed in Table Cell instead of displaying image

./temp/webdynpro/web/local/Profiles_AllSAP/Components/com.comp.ias.Comp_AllSAP/Green.jpg

Any tips for that.

Thank you in advance

Regards

Maruti

[oliver · Accepted solution]

I don't think you need the WDURLGenerator part. If you put it in the right place, filename of the image is enough. Try store the image somewhere in src/mimes/Components/<packagename>

ok

[Former Member · Accepted solution]

Maruti,

What cell editor are you using? Is this Image?

Also, does Image.Source property is bound to ImageURL attribute?

VS

[former_member186016 · Accepted solution]

Hi,

The UI element in cell should be of type Image.

Store the images under src/packages/mimses/Components/<component-package>.

Then try the code.

Try the method "getWebResourcePath()" also.It is under WDURLGenerator.

Regards,

Ashwani Kr Sharma

Message was edited by:

Ashwani Kr Sharma

[former_member187990]

Hi Maruthi,

1).First create a simple type in the Dictionary say <b>photos</b>.Create an <b>enumeration</b> for the <b>Photos(image1,imag2,imag3).</b>

2).Place a <b>DropDownByKey</b> UI Element in the View.

3).Create a context attribute say <b>ske</b>y in the context and change its type to the simple type <b>photos</b>

4).Map the <b>selectedkey property</b> of the <b>dropdownbykey</b> UI Element to the context attribute <b>skey</b>.

4).Create a Context Attribute say <b>img</b> in the View Controller.

5).Create an <b>Image</b> UI element in the view and map the <b>source</b> property with the img attribute.

6).create an <b>event(OnSelect)</b> for the <b>dropdownbykey</b> UI Element.

7).In the event handler write the code to display the image.

say,

<b>if(wdContext.currentContextElement.getSkey()==<Image Name 1>)

wdContext.currentContextElement.setImg(Image 1);</b>

Repeat checking if other key is selected

Regards,

Sathish Kumar SV

[Former Member]

Hi,

keep all of the images in components->mimes folder

there are 2 scenaros,

1) If you are binding a value node (Node A )to the data source property of the Table ,

add a new value attribute(imgSrc) to the node A and while filling the node give the proper values to the imgSrc.

so for each row we have different images to be displayed..you can create a image element and bind the imgSrc to the Image source property of the Image

2) If you are binding a Mode node (Node A )to the data source property of the Table

create A value node(Node B) inside Node A and add a new attribute imgSrc

keep the singleton property of the Node B as false

cretae a supply function and fill the Node

so for each row we have different images to be displayed..you can create a image element and bind the imgSrc to the Image source property of the Image

AM

[oliver]

Hi Maruti,

as you probably know images can be displayed next to an element in a table. Therefor you have element properties like imageAlt, imageFirst, etc. Property imageSource should point to a context attribute that contains the image path (somewhere in src/mimes/Components/... should be fine). So for your changing images you would probably have a couple of different attributes, if you want to have more than one image in the table. If one is enough, you could just change the content of the attribute and the image in the table will change.

Hope that helps,

ok

[Former Member]

Maruti,

To display different images in a Image UI element present in a Table Cell Editor, use a calculated attribute (<i>say, img</i>) of data type "string" and bind this attribute to the property "source" of the Image UI element.

Place your image files inside the folder src/mimes/components/<componentName>, and implement your accessor to simply return the file name of the image file in the aforementioned folder.

public String getSource(IWDNodeElement element)
{
  if (<Condition1>)
  {
    return "<ImageFileName1>";
  }
  else if (<Condition2>)
  {
    return "<ImageFileName2>";
  }
  else
  {
    return ""; 
  }
}

Bala