Skip to Content
avatar image
Former Member

Image in table dynamically , How?

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    May 16, 2007 at 09:50 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • avatar image
    Former Member
    May 16, 2007 at 09:48 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • May 16, 2007 at 09:50 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 16, 2007 at 10:27 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 16, 2007 at 10:57 AM

    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

    Add comment
    10|10000 characters needed characters exceeded