Clickable image control in List View that opens subform?

  • 7 March 2017
  • 4 replies
  • 102 views

Badge +8

I'm looking to add a clickable image control (to show the Question16.png icon image) to each row of a list view. On click, I want to use a rule to open a sub form and have that rule pull some data from the row its on and feed it into the parameters of the sub-form.

 

I've tried to use the picture control. But that does not show up on list view rows.

 

I've tried a data label control, but that does not have a click event, only a changed event. Further more, the "click" event is for the entire row.. Which I'm using for some check box functionality. So I need to somehow override the full row click on this column so this control will react to its own click and not activate the row level click.

 

If I were to use a data label with literal information, what do I do to manually open a sub-form in a modal dialog? I don't need to pass any information back to the main form.. (at least this time).

 


4 replies

Badge +9

HI,

Can you please provide me the data source example with data type where you populate the listview. I would like to try this functionality too.

Thanks.

Badge +8

I'm using SharePoint 2013 as my data source.. I've got one list that the users will interract with. Each row in the list represents some work they need to do. (A task, but not a K2 workflow task.)

 

In a second list, there are instructions on what to do to accomplish the task. There's a 1 to many logical relationship between the two lists..

 

So I want a blue circle with a ? icon to be rendered for each row of the first list. When they click on it, I want a sub-form to open that will display the instructions for the task.

 

I'm thinking I'll need to do a little JQuery to bind a click event to the image, grabbing the ID of the instruction list from some hidden field in the row. Any better ideas?

Badge +9

HI,

The one I tried is very close to it and with a little tweak, it should work.

 

1. Create an unbound data lable column in the right and named it 'Link' or anything you like.

 

2. In the Expression of the data label 'Link' properties, create a new expression and name it 'ImageLinkExp' or anything you like. In the text box, write th following expression:

 

Concatenate ( <a href=", http://www.cnn.com, " target="_blank">, <img style="width:16px; height:16px;" src="http://[k2servername]/Designer/Styles/Platinum/Images/Icons/PadRight16.png"></img>, </a> ) 

 

3. Do not forget to check the literal checkbox.

 

3. save it. and run the view.

 

Explanation: If you look at the HTML code, I have hard coded href="http://www.cnn.com" which can be replaced with the another expression if you have to open the subform.

 

Refer the article: https://help.k2.com/kb001404 for expression. Hope it works with some tweak.

Badge +8

Thanks for your thoughts.. I ended opening a Remote Support ticket to discuss options. Here's where we've ended up at (haven't talked with the business user yet to see what option will work for them.)

 

1) Use a toolbar button and use a rule to grab the "selected item" before opening the sub-view/form. So visually, this takes the help icon off of each individual row. And the user will have to click on a row first before clicking on the help button. It'll also require that the edit list is not in multi-select mode.

 

2) Trace the javascript calls and wire it up manually for each row.. One piece of the puzzle that helped me see how this option might work is that sub-forms/views are actually embedded into the parent forms.. hidden DIVs that get brought to a modal window.. Before the call, I was confused as to how I was going to call a modal window.. now I know I just have to trace the calls on the page.

Reply