Using a custom metadata field in a SharePoint list to set categorisation & filter criteria that is later used by List and Data View Web Parts to arrange & filter content for specific audiences. Depending on the audience that a user is in, I wish to set alternate default values for specific fields rendered by the List Form Web Part.
In most cases, a custom multiple choice field in the list will be set to a value which corresponds to the current user’s audience, but will sometimes need to be manually adjusted. To improve the experience for end users, the appropriate checkbox option from the multiple choice field that corresponds to the current user’s audience will be selected when the form loads, and the default value for the field un-checked if required.
The custom field is used in multiple content types across the primary site collection. I found that when the field is included in a form rendered by the List View Web Part for a particular list, the HTML element name and id is not the equal to the same field rendered by a List Form Web Part on another list. For this reason, I included the javascript on the NewForm.aspx page only on the list i wish to implement the feature using a Content Editor Web Part (CEWP).
A separate CEWP containing the JavaScript for each audience was added to the page under the List View Web Part, then targeted to the corresponding audience.
The JavaScript used to update the field values is quite simple. As the field i wish to update is a multiple choice field (check boxes), I needed two lines of code in the script; the first unsellects the original default value for the field (set via the column settings), then selects the checkbox option that corresponds to the current user’s audience. As all CEWPs are targeted to each audience, only one should display and execute the JavaScript for each user. If a user is a member of more than one audience, the value set by the bottom most CEWP will be applied to the field rendered by the List Form Web Part.
Depending on the type of field being updated, you will need to update the JavaScript to set the field value with the appropriate data type and data. The steps below apply to a multiple choice field displayed as check boxes.
<script type="text/javascript" language="javascript" >
<!--
document.getElementById('checkbox default value id').checked = "";
document.getElementById('checkbox required value id').checked = "checked";
//-->
</script>
1. To find the Id of the fields that are being updated, view the source of the NewForm.aspx page and search for the internal name for the field. The field will be directly after a html comment containing information about the field:
<!--
FieldName="fieldname"
FieldType="SPFieldMultiChoice"
-->2. Once you have found the position in the source containing the form input you with to update, first copy the id of the checkbox field that is selected by default.
3. In the first line of the above JavaScript, replace the text 'checkbox default value id' with the required Id of the form element.
4. Repeat step 2 to obtain the Id of the check box option you wish to select.
5. Replace (in the second line of the JS) the text 'checkbox required value id' with the required Id.
When the page loads, the CEWP corresponding to the current user’s audience will be displayed, resulting in the JavaScript updating the field values/selections in the above form generated by the List Form Web Part. The checkbox field specified in the second line of JavaScript will be selected, and the original default option unchecked.
Related:
- Split List View web part labels (javascript) - The following is a javascript function created to split long questions / column titles on a SharePoint survey or list when editing (EditForm.aspx / DispForm.aspx).
Posts
5 comments:
I am not able to do this..can you elaborate more ???
I have Newform and Number which i want to set
Fieldname = CustomerID
Thanks
Parth
Hi Parth,
The JavaScript sets the value of a field in the NewForm to something that is known, or a value that can be retrieved from a query string parameter or similar.
You will need to view the source code of the NewForm.aspx page, then find the html code for the input field you want to set the value of. Once you have found the input field, copy the value in the id attribute of the input element and paste into the string passed to the getElementById() function.
txtID = document.getElementById('field_id');
You would then set the value of the field:
txtID.value = 'xxxxxxxxxx';
The javascript in the article above sets the value of a multiple choice field, by first un-checking the default option, the checking the option that is required. In your case you would need to set the value of the text field using the javascript instead.
In the case of the article above, the required value is determined and set using audiences and targeting.
Thanks
Pardon my ignorance please, but this is what i was able to write :
var txtID = document.getElementById('ctl00_m_g_02afb0bf_880c_4a67_bbd3_ab97c94a902d_ctl00_ctl04_ctl17_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
txtID.value='9';
Please let me know where i am going wrong ??
Hi Parth,
The issue is most likely due to the position on the page that the script is executed. I tested this by adding the script to the head section using the asp:content AdditionalPageHead element without success.
My solution was to add a content editor web part to the page (under the list form web part), which contains the javascript to update the requitred field. Include the following in the content editor web part:
<script type="text/javascript" language="javascript">
<!--
var txtID = document.getElementById('ctl00_m_g_02afb0bf_880c_4a67_bbd3_ab97c94a902d_ctl00_ctl04_ctl17_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
txtID.value = '9';
//-->
</script>
Thanks
I should also note that if you did want to have the JavaScript in the head section of the page, included in the master page or in a separate JavaScript file, you could do so by including the script in a function instead, which would then then called after the List Form has loaded on the page.
If including the function in a separate JavaScript file linked to the page, the function would also need to be called after the form loads (using a content editor web part, or by including the script in the page source after the web part zone that contains the List Form).
Use a JavaScript debugger to check that your script is being executed on the page, and is working as expected, and for any syntax errors. Displaying alerts containing the data which has/is being processed can also help to follow the process, and ensure that the script is being executed and completed without (logical or syntax) errors.
I use Firebug (Firefox plugin) mostly for debugging JavaScript (also good for adjusting html and CSS on-the-fly when troubleshooting layout and style issues in Firefox).
Post a Comment