Category Archives: Requests

Collect input from custom input fields and store in multiline plain text field

16.11.2009 Fixed an error found by Marc Verner, resulting in values returning “undefined”. This error var introduced by my previous update because i didn’t test it thoroughly…

I have added some code to show how to use this code with multiple fields. This code is commented out, but is found in lines 6, 10 and 54-63. Uncomment these lines and you are good to go with another field with FieldInternalName “MultilinePlain2”. I have also added an attribute “labelPosition”, value “above” or “before” to determine label position.

14.11.2009 Small update on alignment of the input field – thanks to Larry. There are now two options on alignment. the default is to have the label above the input-field. Comment out line 17 and activate line 19 to have the label before the input-field (note that a long label will fall behind the input-field).

I got a request that i thought was worth doing a post on. Its from Marc Verner and sounded like this:

Hey Alexander,
I currently have a MS Word based form that contains a 2 column by 10 row table where users provide up to 10 keycodes and their corresponding descriptions. I am hesitant to make 20 sharepoint variables to capture this since it will make a mess of the form – and I don’t need to query or report on these fields. Instead I’m looking for a possible solution for pre-populating a rich text field with a table template including column names. This way when a user creates a new item, they will see the familiar table and simply fill it in as per usual.
Not sure if its possible but you have really amazed me so far so figured I’d ask =)
Many thanks,
Marc

I do not like SharePoint’s rich text fields as the clutter the HTML-code to the non recognizable when editing. This solution is therefore based on generating some custom input fields and storing the result in a multi line text field of type “plain text”.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

You start with a standard multiline text field like this:
IMG

Add the script, and you end up with this:
IMG

Add a CEWP below your NewForm list-form (and EditForm if you like) like this:
IMG

And add this code:
You must replace any occurrence of “MultilinePlain” with your FieldInternalName
[javascript]
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Array to create the input fileds from
var arr = [‘Label 1′,’Long Label 2′,’Even longer Label 3′,’Label 4′,’Label 5’];
//var arr2 = [‘Label 6′,’Long Label 7′,’Even longer Label 8′,’Label 9′,’Label 10′];

// Call the script with the array, and the FieldInternalName of the multiline text field
generateInputAndStoreInMultilineText(arr,’MultilinePlain’,’above’,300);
//generateInputAndStoreInMultilineText(arr2,’MultilinePlain2′,’before’,300);

function generateInputAndStoreInMultilineText(arrOfLabels,FieldInternalName,labelPosition,widthOfInputField){
if(widthOfInputField==undefined)widthOfInputField=250;
// Hide the multiline text field
$(fields[FieldInternalName]).find(".ms-formbody :input:last").hide().next().hide();
var customInputFields = ”;
// Loop trough all "Labels" and create the input field
$.each(arrOfLabels,function(idx,item){
// Label position
if(labelPosition==’above’){
customInputFields += "<div id=’customInput_" + idx + "’ value=’" + item + "’ style=’padding:2px’>" + item + "<br><input type=’Text’ style=’width:100%;margin:0 13 0 0;’></div>";
}else if(labelPosition==’before’){
customInputFields += "<div id=’customInput_" + idx + "’ value=’" + item + "’ style=’padding:2px;’>" + item + "<div style=’text-align:right;margin: -17px 13px 0 0;’><input type=’Text’ style=’width:" + widthOfInputField + "px’></div></div>";
}
});
// Insert the custom input fields
$(fields[FieldInternalName]).find(‘.ms-formbody’).prepend(customInputFields);
// Handle page refresh due to form validation, and preserve the values in the custom inputs
$(document).ready(function(){
// Read the values from the hidden multiline textfield
if($(fields[FieldInternalName]).find(".ms-formbody :input:last").val()!=”){
// Split the values
var raw = $(fields[FieldInternalName]).find(".ms-formbody :input:last").val();
var split = raw.split(‘n’);
// Insert the values in the correct "custom input"
$(fields[FieldInternalName]).find(".ms-formbody div[id^=’customInput_’]").each(function(idx){
var splitAgain = split[idx].split(‘: ‘);
$(this).val(splitAgain[0]);
$(this).find(‘input’).val(splitAgain[1]);
});
}
});
}

function PreSaveAction(){
var valToSave = ”;
// Build the content to write to the hidden multiline field
$(fields[‘MultilinePlain’]).find(".ms-formbody div[id^=’customInput_’]").each(function(){
valToSave += $(this).val() + ": " + $(this).find(‘input’).val() + "n";
});
// Write to multiline field
$(fields[‘MultilinePlain’]).find(".ms-formbody :input:last").val(valToSave);

/*
// Field nr 2
var valToSave = ”;
// Build the content to write to the hidden multiline field
$(fields[‘MultilinePlain2′]).find(".ms-formbody div[id^=’customInput_’]").each(function(){
valToSave += $(this).val() + ": " + $(this).find(‘input’).val() + "n";
});
// Write to multiline field
$(fields[‘MultilinePlain2’]).find(".ms-formbody :input:last").val(valToSave);
*/
return true; // Must return true for item to be saved
}

function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf(‘FieldInternalName="’)<0) return;
var start = $(this).html().indexOf(‘FieldInternalName="’)+19;
var stopp = $(this).html().indexOf(‘FieldType="’)-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>
[/javascript]
The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The script handles page refresh due to form validation, and preserves the values in the custom input fields (it reads them back from the hidden text field). The code can be used for both NewForm and for EditForm due to the same logic.

The values are stored in a proper format to present in DispForm and in list view’s like this:
IMG
IMG

Read here how to find the FieldInternalName of your field

Don’t hesitate to ask if all is not clear

Regards
Alexander

Move site actions to the left

21.02.2010: Updated the post with the code for floating the site action menu to the right on the screen (as requested by Larry).

This one proved a bit tricky because the site action menu is part of the master page.

See codeblock below for updated code. Please let me know if you find any bugs.


After i posted the solution to Move view selector to the left, i got a request from Charlie Epes for the same solution regarding the “Site Actions-menu”.

This is the default placement of the Site Actions-menu:
IMG

Here the menu is inserted after the last toplink (dynamic):
IMG


Here is how it’s done
Add a CEWP below the list view, and add this code (alter the location of the jQuery-scipt as needed)
[javascript]
<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("table.ms-bannerframe table:first td:last").after($("table.ms-bannerframe td:last"));
</script>
[/javascript]

Code for floating the menu to the right (replace the code supplied above with this one):
[javascript]
<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Site action float right
$(document).ready(function(){
setTimeout(function(){
siteActionFloatRight();
},500);
});

function siteActionFloatRight(){
var menuWidth = $("table.ms-siteaction").width();
var doc = $(document).width();
var win = $(window).width();
var scr = $(window).scrollLeft();

left = doc-win-scr+menuWidth;
if(left<120){
left=100;
}
// Move the site action menu to the new position
$("table.ms-siteaction").css({‘position’:’absolute’,’top’:0,’left’:-left});
}

// Handle resize and scroll
$(window).resize(function() {
siteActionFloatRight();
}).scroll(function() {
siteActionFloatRight();
});

// Make it adapt to changing document width due to expanding groups
$("td[class^=’ms-gb’]").click(function(){
setTimeout(function(){
siteActionFloatRight();
},250);
});
</script>
[/javascript]

Regards
Alexander

Move view selector to the left

06.02.2010 Added another method for floating the view selector on the right side of the page.


I got a request from “tecrms” that sounded like this:

As you know on all list views and document views, the view selector is on the right hand side of the menu bar. This can make it quite cumbersome for users looking at lists with many columns to change the view. A better option would be for the view selector to be on the left hand side and right hand side of the menu bar. I know I can move the view selector via SPD but would rather use a JavaScript options if one was available. Would this be something you would be interested in creating?

It’s often harder to think out the question than to actually solve the issue…

This is the default placement of the view-selector:
IMG

Here the selector is inserted after the “Settings-menu”:
IMG


Here is how it’s done
Add a CEWP below the list view, and add this code (alter the location of the jQuery-scipt as needed)
[javascript]
<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("td.ms-toolbar:last").insertBefore($("td.ms-toolbar[width=’99%’]"));
</script>
[/javascript]

Use this code for a floating menu on the right side of the page:
[javascript]
<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
viewMenuFloatRight();
});

function viewMenuFloatRight(){
var top = $("td.ms-toolbar:last").offset().top+2;
var menuWidth = $("td.ms-toolbar:last table").width()+15;
var left = $(window).width() – menuWidth + $(window).scrollLeft();
// Position the menu
$("td.ms-toolbar:last table").css({‘position’:’absolute’,’top’:top,’left’:left});
// Paging
$("td.ms-toolbar td[id=’topPagingCellWPQ1′] table").css({‘position’:’absolute’,’top’:top,’left’:left-50});
}

// Handle resize and scroll
$(window).resize(function() {
viewMenuFloatRight();
}).scroll(function() {
viewMenuFloatRight();
});
</script>
[/javascript]

Regards
Alexander

Requests


Post requests and questions in this post, but be patient awaiting reply or solution examples. This is a “one man blog” and i have limited time to answer questions. There will be less activity during the summer months, but i will keep posting new solutions, only on a slightly smaller scale.


I’m open to requests!
I get many ideas on things to write about from my readers, feel free to make requests on things you would like to learn more about.

I will, from the best of my knowledge (and time), answer your questions.

Post requests as comments to this post.

Updated!

Use the rating on the request to vote them up, thus “forcing” me to answer them…

The comments are split into pages with 25 top level comments per page, and the last page displayed by default. Use the links at the bottom of the page to read older comments.