Video Screencast Help

Workflow creating dynamic content text and image

Created: 09 Aug 2012 • Updated: 29 Aug 2012 | 7 comments
LCode's picture
This issue has been solved. See solution.

I would like to create a form in workflow which displays software products and their product image (and other fields)
So far I have added a view to the database and created a integration library to retrieve software products and the product image.
Tables used are vRM_Software_Product_Item and dbo.Inv_Software_Image.

I tried to use a list view but I can't convert the field imageurl to an image.
Fields added in a list view are always a hyperlink (<A href=....>). If I change it to image (<IMG src=...>) the src does not get's replaced with the value of the field.

Currently I have the feeling that there are two possibilities but I can't find out how to use them.

  • Dynamically creating items (labels, images, buttons, ...). How can this be done?
  • Perhaps using an AjaxLabel. But what needs to be defined to populate this label?

I could not find appropriate documentation or guides on this.
Has anyone experience on this and can point me in the right direction?

Comments 7 CommentsJump to latest comment

jhallam3's picture

Hi,

 

I played with this for some time and had the image within the datagrid. however it wasnt really that good tbh and was awful.

What we have is a grid with the data and then a dymanic update panel with an image on it.

All our images are saved to a dirrectory and then that file path is referenced in sql. thinking back I cheated and had the images as image<ID>.jpg

then on the grid turn post page on and then on the image the file path is location\locationb\locationsc\image<thisform.data.gridname.id>.jpg.

this allows you to select a row and then get a image displayed next to it.

You then can have a scrolling data grid with a static location of the image it works great.

 

 

 

 

Thanks

Jon Hallam

ManagedDesktop.com

SDriver's picture

I'd tried the above myself, but found when the grid posted the 'image url' component would change but would lag by one image behind my selection.

For example:
on loading the page if I first clicked on a PC item, screen refreshes, but image doesn't change and then if i clicked on a laptop item, it would refresh and show the image for a PC etc.

Is there anything I'm missing?

general info
grid has 'post on change' turned on
image URL component in dynamic update panel but the grid is not (tried it both ways still same)
variable set to 'ThisFormData.SelectedHardwareItem.Value'  (data from grid selection containing url)

workflow version 7.1.1500
 

DanGordon's picture

We don't submit on value change - ours is done using javascript. I'm not sure if our scenario is exactly what you want, but here's how it works for us:
 

  1. The DataGrid has a ControlID of SoftwareCatalog.
  2. The DataGrid has a onclick event to call the updateDetails() function.
  3. The form has a script (example attached) which defines the updateDetails() function.
  4. The form has a bunch of labels and an image component, all with Control IDs.

When a grid item is clicked, the updateDetails() function is called, which gets the currently selected row and grabs the various data the appropriate cells. Various labels (and one image component) are then updated via JS to contain the value of the cells.

I've also attached a screenshot to give you a better idea on the result. The script I gave only contains the code to update the image component, but should give you a start - the path to the software image is in cell 15 of the row which is hidden from display in the grid.

Hopefully this helps / is relevant!

Example Screenshot
AttachmentSize
updateDetails 393 bytes
SOLUTION
SDriver's picture

Thanks Dan, that was exactly what I needed, I've included the modified version below if anyone wanted to know how todo text aswell.

function updateDetails()
{
  try
  {
    var theGrid = igtbl_getGridById('Grid_SoftwareCatalog');
    var gridAr  = theGrid.getActiveRow();
    var sImgSrc = 'http://{servername}/TestWorkflow/images/';
   
var sIcon = gridAr.getCell(4).getValue();
    var sName = gridAr.getCell(1).getValue();
    var sDesc =  gridAr.getCell(2).getValue();
    var sCost =  gridAr.getCell(3).getValue();
    var oIcon = document.getElementById('CatalogItemIcon').src = (sImgSrc + sIcon);
    var oName = document.getElementById('CatalogItemName').innerHTML = sName;
    var oDesc = document.getElementById('CatalogItemDesc').innerHTML = sDesc;
    var oCost = document.getElementById('CatalogItemCost').innerHTML = ('$'+sCost);

  }
  catch(e) {}
}

LCode's picture

Thanks DanGordon and SDriver you've both pointed me in the right direction.
Which versions of Workflow are you both using?
I needed to change the code the get it working.

I need to access the grid "Sw_Grid" via variable oGridxSwxGrid.
So basically oGrid gets attached in the front and underscores are replaced by x's.
My syntax to get the selected row is the following:

var gridAr = oGridxSwxGrid.getActiveRow()

IT Consultant - IT LifeCycle Management/Symantec Endpoint Management @Xylos

SDriver's picture

I'm using workflow 7.1.1500 (7.1 SP2)

you are probably right the 'igtbl_getGridById' command is calling a infragistics function in the backend of workflow so version would probably make a difference.

Just as a test I tried your code, and it worked fine in my environment, so either way works for me.

      var oGridxSwxGrid = igtbl_getGridById('Grid_SoftwareCatalog');
      var gridAr = oGridxSwxGrid.getActiveRow();

 OR
      var theGrid = igtbl_getGridById('Grid_SoftwareCatalog');
      var gridAr  = theGrid.getActiveRow();

but really the only change is the variable name so it should work with whatever you put there.

one thing i had issue with was the grid it needed to be called 'SoftwareCatalog' not 'Grid_SoftwareCatalog' as in the coding but that has more todo with my lack of javascript knowledge

LCode's picture

SDriver,  that was not what I meant. Let me explain a little further. I discovered that Workflow automatically generated a script part beginning with

var oGridxSwGrid = igtbl_initTable(...)

I accessed that automatically generated variable because the igtbl_getGridById did not work.

However in the meantime I have done a repair installation of the Workflow Engine and now all Infragistics functions are working normally and returning values. And in fact the script you provided does work now.

Thanks for your help!

IT Consultant - IT LifeCycle Management/Symantec Endpoint Management @Xylos