Multi Level Dropdowns in NewForm
Below tutorial shows how to inter link two custom lists with ID as a Key. I
have taken project logs as an Example
Pictorial View of how the mapping is going to be done with two custom lists
ID from Project Details list and Project ID from Project Logs list are the key
for mapping, where ID from project Details is autogenerateed
Step 1: Create Project Details List with Columns Project Title and Project
Description
Step 2: Create Project Logs with Columns Module , Hrs Spent and
ProjectID
Step 3: The logs creation can be done after the ID been created for each Record.
So including the log entry in Newform.aspx is not possible until you have some
Idea to generate unique IDs. So here log entry has been given in the
Dispform.aspx for each project details.
Step4: Open Dispform.aspx of Project Details and Insert a HyperLink below the
form saying "Add Log"
Each Project Details have ID generated.
ID is the key for the logs.
For every log entry ID been stored in Project ID in Projects
Logs List
Step5: Add Log Link should be customized based on the Project Selected. (Example
: /NewForm.aspx?ProjectID=<ID>)
Step6: ID needs to be fetched from the URL and Concatenate with the Add Log Link
using the javascript below
<script type="text/javascript">
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
document.write(‘<a href="<sharePoint Link>/Lists/Project
Logs/NewForm.aspx?ProjectID=’+ querySt("ID") +’&Source=<sharePoint
Link>/Lists/Project Details/DispForm.aspx?ID=’+ querySt("ID") +’">Add a
Log</a>’)
</script> |
Step 7: Pass ProjectID from Hyperlink to the Project ID text box to create a
mapping between project and it logs.
Step8: Put the below javascript inside Newform.aspx of Project Logs to grab the
ProjectID value from Hyperlink and put it inside Project ID Textbox. Get the ID
for the textbox through "View Source" or Select /Copy
dropdown from Browser and paste it in SharePoint Designer /Front Page/
Dreamweaver to get the ID.
| <script type="text/javascript">
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
document.getElementById("ctl00_m_g_e7196a27_da13_4732_9066_66eac5f5c220_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField").value=querySt("ProjectID")
</script>
|
Step 9: Now the Entire Project ID <tr> needs to be hidden from the user in order
to avoid the mapping problem. Below javascript code helps to hide the entire TR
of project ID
| <script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideFields");
function findacontrol(FieldName) {
var arr = document.getElementsByTagName("!");
// get all comments
for (var i=0;i < arr.length; i++ )
{
// now match the field name
if (arr[i].innerHTML.indexOf(FieldName) > 0)
{ return arr[i]; }
}
}
function hideFields() {
var control = findacontrol("Project ID");
control.parentNode.parentNode.style.display="none";
}
</script> |
Step 10: Once submitted, it comes back to Dispform.aspx of Project Details
list. Need to include logs below the project display.
Step 11: Insert ->SharePoint Controls -> WebPart -> Project Logs
and Convert to XSLT View
Step11: Remove Toolbars from Project Logs.
Step12: Filter the logs based on the ID. After the webpart been converted to
XSLT, Create a parameter that will hold the ID from hyperlink. Below screen
shows how to create a parameter to hold ID value using Query String.
Step 13: Filter Project ID from Project Logs with the Parameter(ProjectID)
created.
