I have tried the below code for getting checked value of toggle switch button. But I am unable to find the checked property of toggle switch in JavaScript method.
.js:
var yammerpt = document.getElementById("toggleSwitch").winControl;
.html:
<div id="toggleSwitch" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{labelOn:'Post to Yammer', labelOff:'Post to Yammer', checked:true}">
The checked property is what you're looking for.
var yammerpt = document.getElementById("toggleSwitch").winControl; //here you get the control itself
var checked = yammerpt.checked;
You are correct - the 'checked' property of the winControl is what you want.
Take a look at this code sample:
http://code.msdn.microsoft.com/windowsapps/ToggleSwitch-control-sample-84c0aacb
And here's the official documentation:
http://msdn.microsoft.com/en-us/library/windows/apps/br229743.aspx
Related
I tried all options like Checked, Checked = true/false etc but non works in SP2013.
<script>
window.onload = function () {
var input = document.getElementById('section1');
input.select();
}
</script>
<input name="sections" id="option1" type="radio"/>
Firstly, you have the wrong ID for the radio button, the id of this radio is option1. The first step should be to get that element and then change the status of checked. Here's the snippet that could help you.
please try :
var input = document.getElementById("option1");
input.checked=true;
In a previous post I asked how to add a bootstrap class to a Data View. The answer was to add the class to the "table.dataview" in a script block. After the table is created the class is applied and all is well.
But when I use a pager the formatting disappears. I am using a partial refresh on the pager to only refresh the data table but doing so means that the bootstrap class does not get applied to the table.
I believe I need to add an event handler that will attach to the refresh action of the dataView to add the class. However I cannot get the event handler to work.
My code for the event handler is below.
<xp:eventHandler refreshMode="partial" submit="true"
id="applyCSS" refreshId="dataView1" event="parialRefresh"
value="what" loaded="false">
<xp:this.binding><![CDATA[#{javascript:"pager1"}]]></xp:this.binding>
<xp:this.action><![CDATA[#{javascript:("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")}]]></xp:this.action>
</xp:eventHandler>
Oliver, the rendered=false was simply a typo - I was testing something and needed to temporarily suppress that.
Oliver and Paul,
Last night I was able to get the partial refresh to work.
I ran across this post by Mark Roden which explained how to do it. There were two different ways to accomplish this, one less and one more efficient. The code I used is below.
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[$('.dataView1PanelWrapper').on("DOMNodeInserted", function(){
$("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")
})]]></xp:this.value>
</xp:scriptBlock>
However, and isn't there almost always a however in Xpages, I have some sortable columns in the view and clicking on the sort brings up the same problem! I lose the class assignment!
So now I would have to intercept that event too, right?
Concerned where this will end. Don't like the idea of DOM Manipulation, and only want to do it if I have too.
I started by using a simple view. It worked great, but for some reason the spacing was messed up in the pagers. I found that by moving the pagers out of the view itself, I was able to get the alignment issue fixed. I think it would be better just to use a view, as I can assign the class directly and won't have to do all this manipulation. It is however very good to know how to do this for the future.
Is that what you would suggest?
==================================================
I have tried Paul Withers suggestion using an output script. This works on the initial page load, but not on any other changes to the data view - when the pager fires, or sorting or any of that. I am close, but no cigar yet. Any suggestions?
<xp:scriptBlock id="scriptBlock5" loaded="false">
<xp:this.value><![CDATA[dojo.require("dojo.behavior");
Behavior = {
".dataview": {
found: function(node) {
dojo.addClass(node,".table-striped table-hover table-bordered table-condensed");
//node.addClass("table-striped table-hover table-bordered table-condensed");
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});]]></xp:this.value>
</xp:scriptBlock>
Move your existing xp:scriptBlock with the working code inside a facet of the xe:dataView. Then the styling will get applied on initial load and on all partial refreshes.
You should call your CSJS stuff to add the class in the onComplete property of the event handler - hard to find, just highlight the event handler object in source code or outline and then open "All properties" to find the "onComplete" property. This event allows CSJS to be called.
BTW: why is the loaded property = false? The event will never we rendered.
dojo.behavior, dojo.ready and dojo.subscribe should allow you to manage this. dojo.behavior allows you to define a particular behaviour for a particular collection of elements which will be retrieved via a Dojo query. dojo.ready will (I believe) run the code when the page initially loads and dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {...} will run the code aftedr a partial refresh.
Here's sample code I used for converting a DataView's category column images to Font Awesome icons, so the Behavior = {...} bit will need amending.
Behavior = {
// Convert xp:pagers to Bootstrap
".catColumn a img": {
found: function(img_node) {
var imgSrc = dojo.getNodeProp(img_node, "alt").toLowerCase();
if (imgSrc.indexOf("collapse") >= 0) {
dojo.place('<i class="fa fa-minus-square"></i> ', img_node, 'replace');
} else {
dojo.place('<i class="fa fa-plus-square"></i> ', img_node, 'replace');
}
}
}
}
dojo.ready(function() {
dojo.behavior.add(Behavior);
dojo.behavior.apply();
});
//Make sure that future pagers are also straightened out
dojo.subscribe("partialrefresh-complete", null, function(method, form, refreshId) {
dojo.behavior.apply();
});
hi i'm having a problem with sharepoint web part
so i want to call message box everytime user input is wrong
so for example if user input password more than 15 than there will be message box that says"Password lenght max 15"
when i wrote
Messagebox.show("Password lenght max 15") it works fine,but if i try to fill password more than 15 than it return error that says sharepoint cannot support message box
so i'm wondering if there's a way to use message box in sharepoint
any help will be appreciated
FYI i put the Messagebox.show in my save button click
thank you
sorry if my english are bad
Message box is not supported in ASP.NET Application so similar in Sharepoint.
SharePoint Support MessageDialog.
SP.UI.ModalDialog.showModalDialog(options)
If you want to open through server side, then you need to create JS function and call it through C# or as below
hyperLink.NavigateUrl = "javascript:SP.UI.ModalDialog.ShowPopupDialog('" + url + "')";
You can send proper string as well using options.
This may be old post, but accepted answer does not work too good in Sharepoint 2013, at least for me. Instead, I have to use this script:
<script ID="callMyFunction">
function myFunction() {
var element = document.createElement('div');
element.innerHTML = 'Hello World, I am the dialog content';
var options = {}
options.title = "Name of dialog";
options.width = 400;
options.height = 300;
options.html = element;//MSDN states it should be string, which is wrong. This is supposed to be DOM element
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);//This starts function "showModalDialog" after loading "sp.ui.dialog.js", if it was not loaded yet.
}
</script>
and call it from my WebPart like this:
Page.ClientScript.RegisterStartupScript(this.GetType(), "callMyFunction", "myFunction()", true);
If you want to use Ali Murtaza answer, remember to load script below, as it seems to be not loaded by default:
<script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>
I'm trying and trying for some time to resolve a viewPanel functionality - var property set to rowData.
Depending on the form name, I want to open the docs. ( which are listed in my viewPanel ) in a normal way and into a <xe:dialog> control. I did found this question Xpages Dynamic dojo dialog control and I'm trying to make it works in my case. the docs which I want to be open in the <xe:dialog>, are also created inside the dialog. By this viewpanel, I want to show/open them using this viewPanel control.
Here is the code from the onClick column event:
var formName = rowData.getDocument().getItemValueString("Form");
var docUNID = rowData.getDocument().getUniversalID();
var href = facesContext.getExternalContext().getRequest().getContextPath();
var pe:NotesViewEntry = rowData
if ( formName == "fmCompanie") // in this case, it works OK.
{ href + "/doc.xsp?documentId=" + docUNID + "&action=openDocument"; }
else if ( formName == "fmPersContact" ) // hmm... Still trying...
{ viewScope.put("dlgDocUnid", pe.getUniversalID())
getComponent("exampleDialog").show(); }
So, by this event I'm trying to set a viewScope variable which uses the UNID for the datasource in my exampleDialog control.
Also: the dialog control ( which lays on the same custom control as the viewPanel) has the documentId:
<xp:this.data>
<xp:dominoDocument var="Pdoc" formName="fmPersContact"
ignoreRequestParams="true" scope="request">
<xp:this.documentId><![CDATA[#{javascript:viewScope.get("dlgDocUnid");}]]></xp:this.documentId>
</xp:dominoDocument>
</xp:this.data>
Still, when I'm trying to open a doc. ( using form == "fmPersContact") the dialog has all fields empty, even if the doc. is already fill with some field values.
I appreciate your help. Thanks for your time.
The data source in the dialog does not contain action attribute. Therefore it does not respect the documentId parameter and creating a new document within the dialog.
Add action="editDocument" attribute and it will work.
Also, check what you are refreshing with the onclick event. You should partially refresh an area that contains your data (e.g. dialog or the panel in your dialog, etc.)
I'm trying to find a way to open the Extension Library Value Picker automatically after load of my XPage. I tried putting the following in the onClientLoad event:
dojo.byId('#{id:MyValuePicker}').click();
But it appears that the value picker does not have a click() method to open the dialog. Any ideas are appreciated. Thanks.
EDIT: Changed code based on #stwissel's comment and viewid issue:
Put the folloiwng in a scriptBlock:
<xp:scriptBlock>
<xp:this.value><![CDATA[
var viewID = "#{javascript:viewScope.viewID}";
XSP.selectValue('extlib.dijit.PickerList',{
"msep":",",
"trim":true,
"listWidth":"550px",
"dlgTitle":"Select One Or More Values",
"control":"#{id:BoundControl}",
"url":"\/Database.nsf\/Test.xsp?$$viewid="+viewID+"&$$axtarget=#{id:MyValuePicker}"
})
]]>
</xp:this.value>
</xp:scriptBlock>
The viewID is set in the beforePageLoad event:
viewScope.viewID = com.ibm.xsp.application.UniqueViewIdManager.getUniqueViewId(facesContext.getViewRoot())
to get this working with bootstrap, use extlib.dijit.BootstrapPickerList3.
Or much better is 'extlib.responsive.dijit.xsp.bootstrap.PickerList'