My Sharepoint World: Discussion Board NewForm.aspx

Showing posts with label Discussion Board NewForm.aspx. Show all posts

NewForm.aspx filter Column based on another column -Cascade Drop Down using Content Editor Web Part and JavaScript.[Like category - sub category]

Modify NewForm.aspx to filter one SharePoint Column based on another column -Cascade Drop Down using Content Editor Web Part and JavaScript.[Like category - sub category/State - City]

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Here we will be using State -City relationship. City will be filtered based on State.

Step 3: Create 3 lists.

List called "State" : Custom list with a column "Title" with all states.

List called "CityState" : Custom list with a column 'City' and one for its State. State Column will be lookup to the previous list "State". Here I have renamed "Title" column as "City".

City will hold column "City" information. State will be a dropdown that loads as a lookup.

List called "Data" : Custom list with a column to have Company name, a column for State[ lookup to the column "Title" in first list "State"], a column for city[ lookup to "City" column of second list "CityState"]

Now State is a lookup column and brings all the value from the first list "State".

Now City is a lookup column and brings all the value from the column "City" in the list "CityState" . So far no filtering is happening.

Step 5: Write the following code in a text. save as html. upload into SharePoint.Link this html page to content editor web part or Write code in Web Part's text editor directly. SPSErvices JS File helps us with the SPCascadeDropDown function.

<SCRIPT type=text/javascript src="http://mysite.com/sites/MySite/Documents/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://mysite.com/sites/MySite/Documents/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function(){

        $().SPServices.SPCascadeDropdowns({
        relationshipList:"CityState",
        relationshipListParentColumn:"State",
        relationshipListChildColumn:"Title",
        parentColumn:"State",
        childColumn:"City"
      });

});

</SCRIPT>

Step 6: After the content editor web part is saved and you exit the page from edit mode, City gets filtered based on the State.

Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Step 8: Now instead of showing all cities depending upon the selected state, you need to show only a particular set of cities based on a CAML query, then that also can be achieved.

Step 9: Create a column of type "Yes\No" in second list "CityData" called "Visible".

Step 10: Now add the CAML query to the SPServices.SPCascadeDropDown function. Notice the comma after the ChildColumn.

$(document).ready(function(){

        $().SPServices.SPCascadeDropdowns({
        relationshipList:"CityState",
        relationshipListParentColumn:"State",
        relationshipListChildColumn:"Title",
        parentColumn:"State",
        childColumn:"City",
        CAMLQuery: "<Eq><FieldRef Name='Visible' /><Value Type='Boolean'>1</Value></Eq>"

      });

});

Step 11: Now for a selected State, Its relevant Cities with Visible ="True" only gets displayed.

Leave your comments below.

Pre populate SharePoint DropDown column in NewForm.aspx depending on query String using Content Editor Web Part and JavaScript

Pre populate SharePoint DropDown column in NewForm.aspx depending on query String using Content Editor Web Part and JavaScript.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Consider a list like "Announcement" with custom "Drop Down" type column.

Step 3: Edit the page. You can modify the URL to edit NewForm.aspx. To the end of the URL append PageView=Shared&ToolPaneView=2. This will open the form in edit mode.

your URL must be like this http://sample.com/sites/BasicJs/Lists/Announcements/NewForm.aspx?PageView=Shared&ToolPaneView=2

Step 4: Add Content Editor Web Part.

Step 5: Write the following code in a text. save as html. upload into SharePoint.Link this html page to content editor web part or Write code in Web Part's text editor directly.

Step 6: Code. Here the query string value from the URL will determine with what value column "Announcement Category" must be populated with.If the URL is like http://sample.com/sites/BasicJs/Lists/Announcements/NewForm.aspx?AnnouncementCategory=Public

<html>
<head>

<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/JsFiles/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function()
{

var queryStringVals = $().SPServices.SPGetQueryString();
var AnnCategory = queryStringVals["AnnouncementCategory"];
var AnnCategorytField = getTagFromIdentifierAndTitle("select","","Announcement Category");
//alert("Control is " + AnnCategorytField.name);
setSelectedOption(AnnCategorytField,AnnCategory);
});

function setSelectedOption(select, value)
{
var opts = select.options;
var l = opts.length;
if (select == null) return;
for (var i=0; i < l; i++)
{
if (opts[i].text == value)
{
select.selectedIndex = i;
return true;
}
}
return false;
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{ return tags[i]; }
}
return null;
}

</SCRIPT>
</head>
<Body></Body>
</html>

Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Step 8: Now you can see that the column "Announcement" is populated with the value from the query string "Public".

Leave your comments below.

Pre populate SharePoint Drop Down column in NewForm.aspx using Content Editor Web Part and JavaScript.

Pre populate SharePoint Drop Down column in NewForm.aspx using Content Editor Web Part and JavaScript.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Consider a list like "Announcement" with custom "Drop Down" type column.

Step 6: Code. Here we try to set the drop down to a predefined value "Public".

<html>
<head>

<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/JsFiles/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function()
{
var AnnCategorytField = getTagFromIdentifierAndTitle("select","","Announcement Category");
//alert("Control is " + AnnCategorytField.name);
setSelectedOption(AnnCategorytField,"Public");
});

function setSelectedOption(select, value)
{
var opts = select.options;
var l = opts.length;
if (select == null) return;
for (var i=0; i < l; i++)
{
if (opts[i].text == value)
{
select.selectedIndex = i;
return true;
}
}
return false;
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{ return tags[i]; }
}
return null;
}

</SCRIPT>
</head>
<Body></Body>
</html>

Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page. Now you can see that the column "Announcement Category" shows Public.

Step 8: Check my next post to populate this "Drop Down" column depending upon the value from the Query string.
Leave your comments below.

Pre populate SharePoint Yes\No column in NewForm.aspx depending on query String using Content Editor Web Part and JavaScript.

Pre populate SharePoint Yes\No column in NewForm.aspx depending on query String using Content Editor Web Part and JavaScript.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Consider a list like "Announcement" with custom "Yes\No" type column.

Step 6: Code. Here the query string value from the URL will determine if the column "Top Announcement" must be checked or not.If the URL is like http://sample.com/sites/BasicJs/Lists/Announcements/NewForm.aspx?IsTopAnnouncement=Yes

<html>
<head>

<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/JsFiles/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function()
{

var queryStringVals = $().SPServices.SPGetQueryString();
var ISTopAnnouncement = queryStringVals["IsTopAnnouncement"];
if (ISTopAnnouncement == 'Yes')
{
//alert(ISTopAnnouncement);
var TopAnnouncementField = getTagFromIdentifierAndTitle("input","","Top Announcement");
//alert("Control is " + KQuestionField.name);
EnableSelection(TopAnnouncementField);
}
});
function EnableSelection(TopAnnouncementField)
{
//alert("inside EnableSelection");
TopAnnouncementField.checked = "True";
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{ return tags[i]; }
}
return null;
}

</SCRIPT>
</head>
<Body></Body>
</html>

Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page. Now you can see that the column "Top Announcement" is checked.

Leave your comments below.

Pre populate SharePoint Yes\No column in NewForm.aspx using content Editor Web Part and JavaScript.

Pre populate SharePoint Yes\No column in NewForm.aspx using Content Editor Web Part and JavaScript.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Consider a list like "Announcement" with custom "Yes\No" type column.

Step 6: Code

<html>
<head>

<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/mysites/myDocLibrary/JsFiles/JsFiles/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function()
{
var TopAnnouncementField = getTagFromIdentifierAndTitle("input","","Top Announcement");
//alert("Control is " + TopAnnouncementField.name);
EnableSelection(TopAnnouncementField);
});

function EnableSelection(TopAnnouncementField)
{
//alert("inside EnableSelection");
TopAnnouncementField.checked = "True";
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{ return tags[i]; }
}
return null;
}
</SCRIPT>
</head>
<Body></Body>
</html>

Step 7: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page. Now you can see that the column "Top Announcement" is checked.

Step 8: Check my next post to check this "Yes\No" column depending upon the value from the Query string.

Leave your comments below.