how to autopopulate a column based on another column - sharepoint

I have a column name "work code" with choices off/work/leave and another column name "transport Refund" with choices none/refund. If I choose OFF in work code I need to have automatically a "NONE" in Transport refund column.
How can I do it

Add the code below into a script editor web part into new/edit form page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("select[title='work code']").change(function(){
if($(this).val()=="off"){
$("select[title='transport Refund']").val("none");
}else{
$("select[title='transport Refund']").val("");
}
});
});
</script>

Related

show/hide tr on dropdown selection for a list in sharepoint

I have created a list in sharepoint now in newform I'm trying to hide and show 3 tr alternatively when i click on dropdown value. for eg: I have 3 option in dropdown A, B, C and my tr have ids(A, B, C) click on A only A is there when B only B is there and when C only C is there. same for edit form how to achieve this?
Sample tested script for a previous thread( I can't remember the link), you could update the script based on your fields' definition.
SPUtility.js
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/siteassets/sputility.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var employeetype = SPUtility.GetSPField('Employee Type');
var showOrHideField = function () {
var employeeValue = employeetype.GetValue();
if (employeeValue == 'Existing Employee') {
SPUtility.GetSPField('Employee Name').Show();
SPUtility.GetSPField('Employee ID').Show();
SPUtility.GetSPField('Candidate Name').Hide();
}
else {
SPUtility.GetSPField('Employee Name').Hide();
SPUtility.GetSPField('Employee ID').Hide();
SPUtility.GetSPField('Candidate Name').Show();
}
}
// run at startup (for edit form)
showOrHideField();
// make sure if the user changes the value we handle it
$(employeetype.Dropdown).on('change', showOrHideField);
});

Sharepoint : Fire Jquery after upload document library

I am new to sharepoint development and my task is to hide certain columns in a document library I managed to do it with jquery but the problem when I add a document to my library the jquery does not activate and the columns will be unmasked again Thanks for your help
If you want to hide columns in document library list view, we just modify the list view and uncheck the columns in this list view.
Show or hide columns in a list or library
If you just want to use jQuery to achieve it. The following code for your reference.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
//add column name
var columns=["column1","column2"];
//hide columns
hideColumns(columns);
}
});
});
function hideColumns(columns){
for(var i=0;i<columns.length;i++){
var columnIndex=0;
$(".ms-listviewtable>thead>tr>th").each(function(index){
if($(this).text().indexOf(columns[i])!=-1){
columnIndex=index;
$(this).hide();
}
});
$(".ms-listviewtable>tbody>tr").each(function(i){
$(this).children("td").eq(columnIndex).hide();
});
}
}
</script>

SharePoint Column fields show or hide depending on Drop down selection

For one of the lists, I have to hide column Project (single line of text) based on the choice column 'Customer' drop down selection. I have two values in customer drop down: Customer W Project and Customer WO Project. If the user selects Customer W Project, I want to hide Project column field on the new item click form. Below is the code I am using, please let me know if anything is wrong:
Also, I am working on SharePoint 2016 online/office 365.
Any help will be greatly appreciated. Thanks.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js></script><script src="/sites/lcpatest/Style%20Library/sputility.js"></script>
<script> $(document).ready(function(){
var customer = SPUtility.GetSPField('Customer');var HideOrShowOthersField=function(){var customerValue = customer.GetValue();
if(customerValue=='Customer W Project'){SPUtility.GetSPField('Project').Hide();
}else {SPUtility.GetSPField('Project').Show();}};HideOrShowOthersField();
$(customer.Dropdown).on('change',HideOrShowOthersField);});</script>
Your jQuery library is so old.
Below code works based on my testing.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/sites/Developer/SiteAssets/sputility.js"></script>
<script>
$(document).ready(function () {
var customer = SPUtility.GetSPField('Customer');
var HideOrShowOthersField = function () {
var customerValue = customer.GetValue();
if (customerValue == 'Customer W Project') {
SPUtility.GetSPField('Project').Hide();
}
else {
SPUtility.GetSPField('Project').Show();
}
};
HideOrShowOthersField();
$(customer.Dropdown).on('change', HideOrShowOthersField);
});
</script>

MVc 5 - validation german date with unobtrusiv js - a simple approach

The question: How get the unobtrusiv validation of a german date running in MVC?
Because I can't find a running example of using globalize 1.x with MVC 5 to validate a german date I needed two days to get it running.
The problems are the order of the js-files, getting the cldr-data and putting it all together in an way it can be reused.
In the answer I will show my current solution.
In this zip-file (https://www.dropbox.com/sh/75dx6alck7itwia/AABFkcgOQVc1bUXFE_jYfR_da?dl=0) you find all files you need.
It includes
an short todo.txt (de and en)
the cldr-data (jsons) in sub-directories
a custom HTML-Helper-class wich writes the needed HTML/js-Scripts to the view.
It seems, that rendering by the helper not allways works. So if there are problems with that, copy the code to every (edit / new) view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/currency.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/globalize/plural.js"></script>
<script src="~/Scripts/globalize/relative-time.js"></script>
<script src="~/Scripts/globalize/unit.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<script>
$(document).ready(function () {
// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
$.when(
$.get("/Scripts/cldr/main/de/ca-gregorian.json"),
$.get("/Scripts/cldr/main/de/numbers.json"),
$.get("/Scripts/cldr/supplemental/likelySubtags.json"),
$.get("/Scripts/cldr/supplemental/timeData.json"),
$.get("/Scripts/cldr/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load)
.then(function () {
Globalize.locale("de-DE");
});
});
</script>
I hope it helps.
This solution based on the answer to MVC 5 - can not get globalisation running.
If you want to use a bündle, see MVC 5, globalize, validate german date: How to bundle the js-scripts?

Add tabs in new item page

I have a list which have around 60 column. In sharepoint page height is very high.
So can I add tabs in sharepoint new item page.
Please Help.
There is no built-in way to do this, but if you can code JavaScript it shouldn't be that hard.
In SharePoint designer open the New/Edit form:
Add a PlaceHolderAdditionalPageHead like this
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.ms-formtable>tbody>tr:gt(9)').hide()
});
function showFields(from, to)
{
jQuery('.ms-formtable>tbody>tr').hide();
if (from>1)
jQuery('.ms-formtable>tbody>tr:lt('+to+'):gt('+(from-2)+')').show();
else
jQuery('.ms-formtable>tbody>tr:lt('+to+')').show();
}
</script>
</asp:Content>
Add some links to the UI inside PlaceHolderMain like this:
1-10
11-20
21-30

Resources