Edit field values in DispForm.aspx

Jan 25, 2010 at 4:02 PM

Is there a way to use jPoint to edit field values when viewing single list items?

This would be useful to add HTML to fields when viewing items, linking items to other pages, etc.

Coordinator
Jan 25, 2010 at 6:08 PM

Sure, you can use jPoint to access the field, get field value, and change the way it displays.  You can even save data back to the list of you want.

Can you give an example of what HTML to add to a field and how you want to link to other pages?

Coordinator
Jan 25, 2010 at 6:39 PM

You can call update function from anywhere and any page on you sharepoint server.

There is a function called updateItem and it lives under List.

jP.Lists.setSPObject(SiteURL, ListName); //example: SiteURL: http://www.yoursite.com/examples/       ,   ListName: YourList

jP.Lists["YourList"].updateItem([{ id:1234, title:'title123'}]); //This will update listItem with ID 1234 to new title text value of 'title123'

You will have to add your own html markup code to retrieve data from user on the DispForm.aspx

You can leverage jQuery to get handle to the form field and add image and when that image is clicked on text box appears for data to be updated.

You can fill out textbox initial value with jP.Form.readForm().Title.val() in case of "Title" field.

Coordinator
Jan 25, 2010 at 7:00 PM
FYI - the setSPObject(SiteURL, ListName) has been deprecated as of version 0.8.  Deprecated means that the function name has been made redundant and will no longer be available in some future version (our comments in 0.8 state that this function will be dropped in version 1.0.)  

From version 0.8 and up, you should use getList([SiteURL], ListName).  

-Will


On Mon, Jan 25, 2010 at 1:39 PM, samirsijercic <notifications@codeplex.com> wrote:

From: samirsijercic

You can call update function from anywhere and any page on you sharepoint server.

There is a function called updateItem and it lives under List.

jP.Lists.setSPObject(SiteURL, ListName); //example: SiteURL: http://www.yoursite.com/examples/       ,   ListName: YourList

jP.Lists["YourList"].updateItem([{ id:1234, title:'title123'}]); //This will update listItem with ID 1234 to new title text value of 'title123'

You will have to add your own html markup code to retrieve data from user on the DispForm.aspx

You can leverage jQuery to get handle to the form field and add image and when that image is clicked on text box appears for data to be updated.

You can fill out textbox initial value with jP.Form.readForm().Title.val() in case of "Title" field.

Read the full discussion online.

To add a post to this discussion, reply to this email (jPoint@discussions.codeplex.com)

To start a new discussion for this project, email jPoint@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com




--
William Lawrence
703-873-7035
Jan 25, 2010 at 7:47 PM

Well like for instance if you had a contact name, and you wanted to link it to search results for them, or to their biography (that in theory would use some data on the page, or something you could retrieve to make the link) you could update their name from

Contact Name

to

<a href="ContactLink/?Contact Name" target="_blank">Contact Name</a>

 

I know you can do some of this with calculated/lookup fields, but sometimes there are more complex requirements that this could meet. It seems like you should be able to do this with jPoint, but I just can't seem to get the syntax right for modifying the display field on DispForm.aspx. I can get the value with jP.Form.readForm().Title.val(), but I can't seem to set it.

Coordinator
Jan 25, 2010 at 8:41 PM

Have you look at the cross-site lookup jPart?

http://www.sharejpoint.com/examples/Lists/CrossSiteLookupDemo/NewForm.aspx

This allows you to select values from another list and display detail information in dispform.aspx, editform.aspx, and newform.aspx.  You can click Item Link to open up the lookup item to view and edit. 

Coordinator
Jan 25, 2010 at 9:17 PM
Here's a snippet to replace the data displayed to your own html.
<script type="text/javascript" src="//sharejpoint.googlecode.com/files/jPointLoader.js" ></script>
<script>
$(document).ready( function ()
{
  jP.Form.readForm();  //readform
  var val = jP.Form.contact.val();  //get current value
  var itemspan = jP.Form.contact.find(":itemdata span");  //get the span where field data is displayed
  itemspan.hide();  //hide that span
  var htm = '<a href="ContactLink/?'+val+'" target="_blank">'+val+'</a>'; //construct your own html
  itemspan.after(htm);  //append html to after <span> element
});
</script>
Coordinator
Jan 25, 2010 at 10:23 PM

Should MyField.val("new value") overwrite the contents of a column called MyField on the dispform.aspx? Probably not because some developers/users may get confused why the contents of MyField did not get updated on the list. DispForm.aspx is a read-only view. That's why to manipulate the contents of the field, you need to use the jPoint API to dive down into the HTML structure and do the manipulation yourself.  That way, you can determine how the UI should notify the users of your solution that they are not looking at the real value but an altered and temprary  one.

-Will

On Jan 25, 2010 4:17 PM, "ken_le" <notifications@codeplex.com> wrote:

From: ken_le

Here's a snippet to replace the data displayed to your own html.
<script>
$(document).ready( function ()
{
  jP.Form.readForm();  //readform
  var val = jP.Form.contact.val();  //get current value
  var itemspan = jP.Form.contact.find(":itemdata span");  //get the span where field data is displayed
  itemspan.hide();  //hide that span
  var htm = ''" target="_blank">'+val+''; //construct your own html
  itemspan.after(htm);  //append html to after  element
});
</script>

Read the full discussion online. To add a post to this discussion, reply to this email (jPoint@disc...

Jan 26, 2010 at 4:47 PM

Well I was able to get a hold of the item (on dispform.aspx) using:

var internalName = 'Title';

//looks like <tr><td><h3><a name="SPBookmark_..."></a>Title</h3></td><td>Title Value</td></tr>
$('a[name=SPBookmark_'+internalName+']').parent().parent().siblings().html('<a href="#">'+internalName+'</a>');

That combined with using:

jP.Form.readForm(); //readform
var val = jP.Form.contact.val();

got me the tools to get this working, thanks for your help!

One note, using html() may not be smart as it just blatantly overrides anything else in there, but for an example it demonstrates how it works at least.

Jan 26, 2010 at 4:57 PM

Well one change, you can just add .find('span') after siblings to just get the span.

For some reason I couldn't get your example above to work, so I just manually traversed my way there.

Coordinator
Jan 26, 2010 at 5:10 PM

Are you using jPoint-0.8.js? 

jP.Form.contact.find(":itemdata");

is new in version 0.8.  It returns the jQuery object of the <TD> that contains data value.

So

jP.Form.contact.find(":itemdata span");

returns the jQuery object of the <span>

My example above just append the <a> after the <span>, and hide <span> instead of overwriting it.

Jan 28, 2010 at 6:46 PM

I don't know why, but I wasn't able to get that to work; though honestly I'm not sure of the syntax; what does a colon do in find, and is itemdata a reference or an actual piece of the data?