Defaulting a Hidden Field on a Form

April 22, 2008 at 1:09 pm 21 comments

I needed to create a form that automatically populates the values for a user when they click the OK button. It turns out that SharePoint requires at least one editable field in order to save the form (If anyone knows a way around this requirement let me know). The scenario is that an Approver can click the Reviewed button in an email message to say that they have read the documents. They are taken to a modified new item form in a custom list and they click OK and the system records the necessary data. Here’s what I had to do to make it work.

Create the Custom List

The custom list was very basic in the case. We needed to be able to track which Approver was clicking OK and what date and time they clicked it. Luckily, ANY list records the Created and Created By data for an item. I simply changed the Title field to DocumentID and the list was ready to roll.

Because of the weird bug I encountered, I had to create another field called Notes. It’s a simple text field with the default options.

Create the Button

In my scenario, the button was to appear inside of an Outlook email – but you can use this logic for a button placed almost anywhere. The key was that we were using the URL to pass the variables to the form, so the button was a hyperlink to the new item form.

I created a button in photoshop and uploaded the image to a SharePoint picture library and grabbed the URL to the image. I then started by creating the following link in the email (part of a workflow):

<a href=”http://yoursharepointaddress/lists/customlistname/newitem.aspx?DocumentID=

At this point, I inserted a variable from the workflow. The workflow which is sending the email to the Approvers already ‘knows’ which DocumentID we are refering to. Therefore the code continued like this:

<a href=http://yoursharepointaddress/lists/customlistname/newitem.aspx?DocumentID=[DocumentIDVariable] target=”_blank”><img src=http://locationofyourimage /></a>

When the user clicks on the button image, it opens a new browser window and takes them to the specified URL. You can pass any variables that you want through the URL. The URL contains the DocumentID variable which we will make use of in the next step.

Create a New Item Form

I used SharePoint Designer (SPD) to edit the newitem.aspx file for the new custom list. I hid the default web part from view and then I added a new dataview. I linked the new dataview to the new custom list I created and inserted the DocumentID and Notes fields as a New Item Form (I will probably write something more detailed about these steps in the future – but the help files on the Microsoft website are perfect at explaining the basics).

I then changed to the DocumentID field on the new form to be a label and changed the Visible property to be False.

I created a new parameter in the Common Dataview Tasks and named that parameter DocumentID and set it to grab the DocumentID from the URL (Microsoft Help files on Dataviews). Remember the name of this parameter.

Now we get into the nitty-gritty. You MUST set the default value for the field in the actual code for the page and not in the properties for the field. I switched SPD to code view and located the code for the DocumentID field (sometimes it’s easier to set the view to Split mode and then click on the field to highlight the appropriate code). The code I added is highlighted:

<asp:TextBox runat=”server” id=”ff1{$Pos}” __designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff1′,$Pos),’Text’,’TextChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Title’)}” text=”{$DocumentID}” Visible=”False” Width=”21px” Height=”16px” />

The code I added sets the value of the ‘text’ to be the DocumentID parameter we created earlier (make sure you include the punctuation exactly as I have above. Save your new form and you are ready to test it.

Verify what you did

If you followed the previous steps you should now have the following:

  1. A hyperlink button you can place anywhere (on a site, in an email, etc.) that passes values through the URL.
  2. A customised new item form that takes the variable from the URL and populates a hidden field. You can apply these steps to any list you have.
  3. When the user clicks the button, it opens the custom form. The user then clicks OK on the custom form and the new item is created in the list.

As you may have realised by now, this is a truly powerful tool for getting information back from your users. I hope to come back at some point an elaborate on some of the earlier steps, but in the meantime, I recommend reading the Microsoft helpfiles – specifically those on the SharePoint Dataviews.

Thanks for reading.

Due to some questions raised in the comments, here are the detailed steps for defaulting a field on a form:

Defaulting a field on a form

1.       Open a SharePoint ASPX page in SharePoint Designer. My page is called edit_lead.aspx and is based on my masterpage.

2.       Use SPLIT view to view the code and the design at the same time.

3.       Insert a <div> container for your form, inside of the content placeholder (I place all of my content within individual DIVS so I can control them through CSS).

4.       Save the page.

5.       Click in the div and select Data View > Insert Data View from the SPD menu bar.

6.       Click on the WebPartPages:DataFormWebPart in design view and select a data source.

7.       Select the fields you want to include and choose Insert Selected Fields As… Single Item Form (I am using the form to edit an existing list item).

8.       When the form appears in your page, click anywhere in the form (that is not a field), and select DataView > Parameters from the menu bar.

9.       Click New Parameter

10.   Name the Parameter (URLLeadID).

11.   Select Query String from the Parameter Source drop-down.

12.   Enter the variable you will use in the URL in the Query String Variable (LeadID).

13.   Click OK.

14.   Select the field you want to populate.

15.   Choose DataView > Format Item As> Text Box.

16.   Click Save.

17.   Now select the field again and look in the code view, it should look similar to this:

<td width=”75%” class=”ms-vb”>

        <asp:TextBox runat=”server” id=”ff1{$Pos}” text=”{@LeadID}” __designer:bind=”{ddwrt:DataBind(‘u’,concat(‘ff1′,$Pos),’Text’,’TextChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@LeadID’)}” />

        <SharePoint:FieldDescription runat=”server” id=”ff1description{$Pos}” FieldName=”LeadID” ControlMode=”Edit”/>

</td>

18.   Locate the text=”{@LeadID}” and replace the @LeadID with your parameter: $URLLeadID (note the $ not the @ symbol).

19.   Click Save.

20.   The field will now autopopulate with the parameter passed from the URL.

Note: If you are create a NEW ITEM FORM, the steps are similar except that you won’t have the text=”{@LeadID}” already in the text box. You will have to add the entire parameter: text=”{$URLLeadID}”

Advertisements

Entry filed under: SharePoint Designer, Web Application.

Auto-Increment a Number in a New List Item Create a drop-down list with a lookup to another site

21 Comments Add your own

  • 2. LeoJ  |  June 13, 2008 at 9:46 am

    i cannot find those code in SPD

    Refer to your reponse in this article:
    http://www.sharepointu.com/forums/p/3410/9037.aspx

    When I click the field on Dataview in split mode after I insert the Query String parameter, I only can see this code:

    and this sharepoint tag without any text value to be set. Would you mind to give me some hints?? Thanks.

    Reply
  • 3. LeoJ  |  June 13, 2008 at 9:49 am

    sorry for sending couple of post here, i cant show those code in comment…

    Basically, I mean I cannot find asp tag in data view but only found sharepoint tag…. u know what i mean..?
    Thanks!

    Reply
  • 4. ThiNg  |  June 13, 2008 at 12:40 pm

    LeoJ,

    I’m going to take a stab at what you are referring to.

    the “<asp:Textbox…” code only appears if you change the field to a “label”.

    1. In design view, click on the field and select the flyout menu (Common FormField Tasks),
    2. Change the Format As option from “List Form Field” to “Label”.
    3. SharePoint will change the code from the SharePoint code to the Asp:Textbox code.
    4. Locate the text value and change it as mentioned in the post.

    I hope that helps clarify the steps a bit more?

    Regards

    Sanj

    Reply
  • 5. LeoJ  |  June 16, 2008 at 4:33 am

    Thanks Sanj and I found what u said in the flyout menu, but still one thing i cant figure out….

    I have already set my Contact list with lookup field call “Company” and add the form action “netvigate to page” in the save button with follow link:

    http://SharepointServer/Lists/Leads/NewForm.aspx?Company=@Company

    Also I added the Query String parameter in NewForm.aspx of Leads but when I go to browser to test it, it only show {@Company} in the company textbox of NewForm.aspx of Leads… it do not show text like Company A or something….. And also the Link shown in browser is

    http://SharepointServer/Lists/Leads/NewForm.aspx?Company=@Company

    not

    http://SharepointServer/Lists/Leads/NewForm.aspx?Company=CompanyA

    I quite confirm i did every stpes u said….

    Please kindly help!!! And Thank you very much!!!

    Reply
  • 6. ThiNg  |  June 16, 2008 at 11:40 am

    Hi Leo,

    Ok, more than likely, the parameter is not being picked up on the source page (therefore not passed to the target URL). I would recommend testing it with a basic connection, that is, ignore the hidden field stuff and just form a hyperlink from one dataview to another.

    Rather than rehash everything here, read this Microsoft help guide and follow all of the steps. Once you establish a link to the field, you can then change the field to a label and add the parameter to the code as per my instructions. Here is the link:

    http://office.microsoft.com/en-us/sharepointdesigner/HA102403641033.aspx

    I highly recommend reading ALL of the help topics on dataviews to make sure you have a firm grasp on how Microsoft ‘wants’ things to be done – then you can start tweaking.

    If that still doesn’t work. let me know and we’ll set up test situation for you.

    Good Luck

    Sanj

    Reply
  • 7. LeoJ  |  June 18, 2008 at 7:35 am

    O my friend… this really drive me crazy, I have go through all those help topic and study alot about xml and xslt things… and also hv a little understanding of ddwrt… but still hv no answer with is… I cant grap the value from the previous list.. I think it should be something wrong when I set the form action, do you mind to post the code of the button with onclick=”javascript: {ddwrt:GenFireS…

    really pain the ass… and thanks for your very kind response!

    LeoJ

    Reply
  • 8. pissed  |  July 13, 2008 at 2:45 am

    I can’t believe how frustrating it is to find a blogger who is half-assed trying to explain something I desparately need to do – but has steps in his explanation to don’t jibe with what I have on screen. For instance: changing a field to a label.

    “1. In design view, click on the field and select the flyout menu (Common FormField Tasks)”, <<>>
    2. Change the Format As option from “List Form Field” to “Label”. <<>>
    3 …

    Either show some screen shots, or stop frustrating the hell out of us!

    Reply
  • 9. pissed  |  July 13, 2008 at 2:47 am

    I was dumb enough to put my comments in tags – so here is what I was trying to say:

    “1. In design view, click on the field and select the flyout menu (Common FormField Tasks)”,

    THIS DOESN”T EXIST! There is a Common DataView Task though – but that doesn’t let me change to a label.

    2. Change the Format As option from “List Form Field” to “Label”.
    Does not exist
    3 …

    Either show some screen shots, or stop frustrating the hell out of us!

    Reply
  • 10. ThiNg  |  July 13, 2008 at 6:26 pm

    As much as I would like to ignore the comments posted by ‘pissed’ because of the sheer rudeness in his comment, I will still try to help.

    The Flyout option “Common DataView Task” means you are clicking on the whole dataview and not the field itself.

    I will try to post a more indepth explanation when I am back in the office, but I can’t post screenshots because the work was for a client. I might recreate it in a ‘test’ environment – but only if someone else requests it. I’m not spending that much time helping someone who is so bitter.

    Reply
  • 11. LeoJ  |  July 30, 2008 at 9:09 am

    Hey Thing, Thanks for you left me a message, i know you must be busy, actually, i know how to did those thing now. And i think that is important to understand to this.

    http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx?CommentPosted=true#commentmessage

    and you know what? My javascript is very bad, i took half day to understand those code and eventually that is useful, coz you can set any thing inside DOM by Querystring. Anyway, Thanks for your Article.

    By the way, I had looked into another article of yours which is about cross site lookup, so any update on that?

    Reply
  • 12. RAK  |  August 21, 2008 at 5:34 pm

    This post saved me! Wish I had found it sooner :).

    Can you help me please with getting the New Item Form to close automatically and go back to the Source URL (URL with the button/link on it)? Right now, when the user clicks OK, the form posts the new data, but stays on the New Item Form.

    Thank you!!

    Reply
  • 13. ThiNg  |  August 21, 2008 at 6:48 pm

    RAK

    It’s already posted on my blog somewhere, one of the design tips I think. You need to send the source page URL in the hyperlink that directs the user to the page. Then you can use a custom action on the Save button to Commit and then Return to Source. There is also some great help articles online at Microsoft.

    HTH

    Reply
  • 14. RAK  |  August 22, 2008 at 3:17 pm

    Got it! Again many thanks HTH!

    Reply
  • 15. RAK  |  August 27, 2008 at 4:32 pm

    hi again – would you happen to know how to fix the problem where URL for the link is getting the & character converted to & , thus breaking the ability to pass multiple querystring variables to the form.

    Here is my code:

    Get Customer Info

    This is the resulting URL which won’t work (notice the &, where it should be &):

    http://SomeSite/sites/SomeDirectory/Lists/Reference%20Accounts/TouchForm.aspx?CustID=4&Customer=ABC&Source=http://SomeSite/sites/SomeDirectory/pages/references.aspx

    Any help is greatly appreciated!

    Reply
  • 16. Bob E  |  October 13, 2008 at 9:41 pm

    Hmmm.. I try this example but the Text box does not display the QS parameter… I can see it in the string but it does not populate in the text box – here is my code for the part:

    Back in the day we used why did MS have to take a simple thing and make it so complicated..

    Reply
  • 17. Doug Patterson  |  October 28, 2008 at 1:26 am

    I’m SOOOO close, but yet so far away.
    I’ve set the parameter fine, pass the parameter fine to the data view web part (only has two fields). I see the value I pass (I didn’t hide the lable), when I enter the value of choice for field2 and press ‘save’ only the field2 value promotes to the list.

    I’ve got a 12 pack of your favorite beer ready to send to you if you can help.

    THanks

    Reply
  • 18. ThiNg  |  October 28, 2008 at 4:42 pm

    OK, I think that I need to update the instructions for this document because it seems to be just missing for some people.

    I’ll write out the full instructions right now and post it in the topic.

    Reply
  • 19. ThiNg  |  October 28, 2008 at 4:53 pm

    @RAK,

    Use & instead of the & symbol in a URL. I find that sometimes it work better with the “&” and sometimes with the “&” wish I could tell you why…

    Thing

    Reply
  • 20. ama  |  December 28, 2008 at 7:06 am

    I’m trying to default a textbox on an edit page.
    I’ve set the text properity to hard-coded value rather than it’s @OldValue. I keep getting an error. “Value does not fall within the expectd range”.
    Any ideas on this?

    Reply
  • 21. jcnet  |  January 15, 2010 at 10:13 pm

    Is it possible to set a Dataview Parameter from and asp.net textbox you’ve added to the page? I see parameter sources for control and form.. but can’t get it to work.

    I’m asking because I’ve been able to do the above using a sharepoint simple form webpart and a webpart connection, but the problem I’m seeing with that is that if you have null/blank in the textbox sharepoint for some reason does not pass anything to the parameter and actually leaves the parameter unchanged.

    Please email me or respond in my url which is forum post.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed



%d bloggers like this: