Posted on

XSLT Formulas

Multi Level Dropdowns in NewForm

Below tutorial shows how to use Formulas in XSLT

Step1 : Insert DataView Web Part. Select the List you wanted to show it in XSLT
and Click on Show Data

Step 2: Select the Columns would like to display and click on Insert Selected
Fields as -> Multiple Item View [This will query all the Records] -> Single Item
View [Query only one Single Record]

Step 3: It will display the below columns. Click on DataView Properties

Step4: Select Show View footer

Step5: Count(/dsQuery/Response/Rows/Row) – This will give the no of records
sum(/dsQuery/Response/Rows/Row/<@ColumnName>) – This will do the summation of
all the values on columnName . Likewise the following operators can be used in
XSLT (average(), ceiling(), floor(), max(), min(), number(), random(), etc..)

Count : <xsl:value-of select="count(/dsQueryResponse/Rows/Row)" />
<br />
Collateral : <xsl:value-of select="sum(/dsQueryResponse/Rows/Row/@Collateral)"
/>
<br />
Web Designing : <xsl:value-of select="sum(/dsQueryResponse/Rows/Row/@Web_x0020_Designing)"
/>


 

Posted on

Show Columns in Newform.aspx based on Dropdown Selection

Multi Level Dropdowns in NewForm

In the below tutorial, i have two different set of Columns. Based on the
dropdown selection , I will show the set of columns for user to be filled in.

Step 1: Open Newform.aspx / Editform.aspx in SharePoint Designer.

Step 2: Close Webpart

Step 3: Insert -> SharePoint Controls -> Custom List Form

Step 4: Arrange Respective Team Columns into div tags or table tags with
Unique IDs

Step 5:Create one javascript file[main.js] and include in newform.aspx
    <script language="javascript" src="/Images/Main.js"></script>

Step6:  Remove those respective columns and organize into one Table or Div
with ID and by default

<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" id="Team1"
style="display:none">
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Team1-TitleColumn<span class="ms-formvalidation"></span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New"
FieldName="Title" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff2′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Title’)}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}"
FieldName="Title" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Team1-DescColumn</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New"
FieldName="Team1_x002d_DescColumn" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff3′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Team1_x002d_DescColumn’)}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}"
FieldName="Team1_x002d_DescColumn" ControlMode="New"/>
</td>
</tr>
</table>

</td>
</tr>


Step 8: Get the ID for the dropdown through "View Source" or Select /Copy
dropdown from Browser and paste it in SharePoint Designer /Front Page/
Dreamweaver to get the ID.

Screen 1: Select and Copy from Browser

Screen2 : Paste it in SharePoint Designer

So the ID will be
:ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice
 

Step 9: Javascript code[Main.js] – Attach Event Listener to the Dropdown, So
onchange / onClick of the dropdown list. Respective team columns should be shown
/ Hiden

document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").attachEvent("onclick",
ShowTeam);

function ShowTeam()
{
w = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").selectedIndex;
var PL = document.getElementById("ctl00_m_g_3cf01b2a_ddef_4295_8601_e6f031220884_ff1_1_ctl00_DropDownChoice").options[w].text;

// Hidding all Teams Columns
document.getElementById("Team1").style.display="none"
document.getElementById("Team2").style.display="none"

//Showing only the team which has been selected
document.getElementById(PL).style.display="block"
}

Step 9: Change dropdown value