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
Related
I am very new to javascript and docsify. I have the following scripts that work fine on a simple html page, but when I use docsify to generate them as a page only one of the script shows the graph. This is true for bunch of different pages I generated with several graphs using vegaEmbed.
<div id="script_1"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_avg_process_time.json";
vegaEmbed('#script_1', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
<div id="script_2"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_edges.json";
vegaEmbed('#script_2', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
You can find the page here: https://gunrock.github.io/docs/#/analysis/results_tc
I am including the following:
<!-- Vega and Vega-Lite Includes -->
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
Per the documentation, only the first script tag is executed: https://docsify.js.org/#/configuration?id=executescript
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>
Using:
SharePoint 2010
jQuery 1.7.2 (from master site, which I can't access)
DataTables 1.10.12
YADCF 0.8.9
select_type: select2
filter type: multi_select_custom_func
Select2 4.0.1
Chosen 1.5.1
YADCF filters work. But after a user selects a filter entry, the page gets stuck at the top. The scrollbar won't work. You can't move the page at all. If user selects a filter type and then refreshes the page, scrolling works with a filter type still in the box. Press clear and scrolling still works. Select a new filter entry and scrolling breaks.
This does not happen to the DataTables free text search box. It only happens when the YADCF filters are manipulated. So there must be a fix for the YADCF or Select2 code.
Alternatively, this might explain what's happening, but I can't access the master page. Wondering if this could be a work around but I don't know how to implement the sp.clientruntimecontext.executequeryasync call.
Any thoughts or ideas would be appreciated. Many thanks.
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/select2.full.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.yadcf.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/select2.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/chosen.min.css">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Name</th><th>No.</th><th>Date</th><th>Memo</th><th>Classification</th><th>Class2</th><th>Class3</th> </thead>
</table>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(AMDB, 'sp.ui.pub.ribbon.js'));
function AMDB(){
var call = $.ajax({
url: "https:/mysite/_vti_bin/listdata.svc/AM?$select=Title,Number,Date,Name,Classification/Classification,Class2/Class2,Class3/Class3&$expand=Classification,Class2,Class3",
async: "true",
type: "GET",
dataType: "json",
headers: {Accept: "application/json;odata=verbose"}
});//close ajax call
call.done(function (data,textStatus, jqXHR){
myData = data.d.results;
var dtTable = $('#example').DataTable({
responsive: true,
data: myData,
columns:[
{data:"Title"},
{data:"Number"},
{data:"Date","render": function (data, type, full, meta) {return moment.utc(data, "x").format('l');}},
{data:"Name","render":function(data, type, full, meta){return'Click here';}},
{data: "Classification.results[, ].Classification"},
{data: "Class2.results[, ].Class2"},
{data: "Class3.results[, ].Class3"}
],
stateSave: true
}); //close DataTable
The issue is caused by SharePoint element-ids having an invalid $-character that's then used for jQuery event-namespaces. Adding the eventhandler works but removing it fails as the eventhandler it's not found anymore. The $-character would need to be escaped or removed from the event-namespace.
I don't have a proper solution but a workaround that works in SharePoint 2013:
var initialSelect = $("#" + fieldSchema.Name + "_" + fieldSchema.Id + "_\\$LookupField");
initialSelect.select2();
// workaround for issue causing invalid-namespace in event-handlers - select2 uses use the container-element.id as event-namespace but sharepoint has $ in element-id that's not valid
initialSelect.on("select2:close", function (e) {
$("div#s4-workspace.ms-core-overlay").off('scroll.select2.select2-' + e.target.id.replace("$", "\\\$"));
});
i used mathjax in HTML page , it works. but a problem related to fontsize exist.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
\(x={72^2-{\sqrt{53^2}}\over 25}\)
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
why in the first syntax[(x={72^2-{\sqrt{53^2}}\over 25})] , fontsize is very small. and what to do to increase its size.
In addition, what is the difference between the two syntax's
\(x={72^2-{\sqrt{53^2}}\over 25}\) .........1
$$x={72^2-{\sqrt{53^2}}\over 25}$$ .........2
You should use \( for inline math, and \[ as equivalent of $$.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
This is part of the line: \(x={72^2-{\sqrt{53^2}}\over 25}\). Those are not:
\[x={72^2-{\sqrt{53^2}}\over 25}\]
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
EDIT
If it isn't enough you can also add \large or \huge.
In his comments OP says he is using HTML ckeditor, I suppose with the Mathematical Formulas widget. You can locate the demo of that widget in page linked and modify its source adding the following code:
<p><span class="math-tex">\( x={72^2-{\sqrt{53^2}}\over 25}\)</span></p>
<p><span class="math-tex">\[ x={72^2-{\sqrt{53^2}}\over 25}\]</span></p>
<p><span class="math-tex">\[ \large { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
<p><span class="math-tex">\[ \huge { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
This should be the result:
You can use {\displaystyle{...}} to force an expression or subexpression to use the sizes and spacing that would be used for a displayed equation. For fractions in particular, if you have the AMSmath extension loaded, you can use \dfrac{}{} in place of \frac{}{} to get a fraction in display style.
<script src="js/jquery-2.1.1.js"></script>
<script src="notify/js/notify.js"></script>
<script src="notify/js/notify-bootstrap.js"></script>
<form>
<div id="userInfoDiv" name="userInfoDiv" style="padding-top:100px;padding-left:100px;">
<span class="box pos-demo">Notifyjs position div</span>
</div>
</form>
<script type="text/javascript">
$(".pos-demo").notify(
"Welcome Guest",
{ position:"right" }
);
$.notify("This notofication is working ","success");
</script>
Note : The notification is not displayed.Where as $,notify("") without position is working fine.
I have the same problem. Though I cannot confirm this the cause I think its because at the time of the notification, the elements do not actually exist in the DOM (the web page), so there is nothing for the element to tie to. It fails silently, I used the Google developer tools and could see no error being generated.
My solution. If you create a function and call in body.onload the element appears. e.g
<body onload="notifyme();">
And then somewhere in the page (at the bottom perhaps)
<script>
function notifyme() {
var s = "Hello";
$("#myelem").notify(s);
}
</script>
I know this works a I have just tried it. Works every time, every page.