Fairly New at Sharepoint Javascript. Need some feedback on custom function - sharepoint

I built this function to find People Pickers by Field Title. Since the picker does not provide and TagName and Tile type of information and custom pages can have multiple people pickers, I used the NOBR tag which displays the title for each picker. This works flawlessly, but I think it can be sped up abit.
Please share your thoughts. Thanks you!!
function resetPickerInput(title){
var result="";
var tags=document.getElementsByTagName("NOBR");
var len=tags.length;
for(var i=0;i<len;i++){
if(tags[i].innerHTML.indexOf(title)>-1){
var div=tags[i].parentNode.parentNode.parentNode.getElementsByTagName("DIV");
var divLen=div.length;
for(var j=0;j<divLen;j++){
if(div[j].name=='upLevelDiv'){
result=div[j];
break;
}
}
}
}
return result;
}

Yes, you are doing it more complicated than you should.
This jQuery example looks very promising (Get Value of People Picker in Sharepoint):
var User = $("textarea[title='People Picker']").val().split("\\");
How do I get text from people picker textarea using javascript only
uses this: $(".ms-inputuserfield #content").each(function(){...
Another example: Hide People Picker control in SharePoint List Forms
Set a People Picker’s Value on a Form – Revisited with jQuery
$(this).find("div[Title='People Picker']").html(userName)
Since you didn't state your version: Retrieve Email Address from sharepoint people picker using javascript a solution for SP2007.

Related

XPages - how do we set a field value in selected view documents

This is my answer to a super simple question that had many scattered partial answers around the internets. Kind of a gist.
I am no longer working with xpages, but at home I still have my TDL app running. There is a very simple to do list view I compiled from some example template. The "mark done" button has been sitting as a dummy for years now - never found the easy way to get that function happening.
After googling my way to some Stack-O and Developerworks and a few Domino blogger q-and-a threads, I put this little pile of SSJS in place and ta-da! No original work here, just the gluing and duct taping - see answer:
This goes in the onClick event for my view "Complete Selected" button. The Status field is my target, with "3" mapped to "Done" in the app:
sessionScope.put("myIdList", getComponent("viewPanel1").getSelectedIds());
var docsForAction = sessionScope.get("myIdList")
var doc:NotesDocument;
for(i=0; i < docsForAction.length; i++){
var unid=database.getDocumentByID(docsForAction[i]).getUniversalID();
doc = database.getDocumentByUNID(unid);
doc.replaceItemValue("Status","3");
doc.save();
}
docsForAction = [];
viewScope.put("myIdList", docsForAction);
context.reloadPage();

xpages column showCheckbox

There is a viewPanel having a column with showCheckbox="true".
Is it possible to restrict the users to select only one row/document ( and not multiple rows/docs. ) listed by the viewPanel?
Not in a View Panel. The View Panel is designed to offer a quick, simple approach with restricted functionality.
An alternative (possibly better) approach may be to have another column with a link or image that triggers whatever functionality you need. That will allow users to trigger functionality with a single click rather than two. The View Panel allows you to place controls in columns instead of just mapping to a column in the underlying view.
Alternatively, you could add a checkbox manually to a column, map to a scoped variable, and check/uncheck programmatically.
Paul's probably right on. My alternative for you is to use a repeat control. You can make it look however you want. Including a view control.
I have an example of this in this NotesIn9 show: http://notesin9.com/index.php/2011/07/11/notesin9-ee-009-using-java-hashmaps-and-treemaps-with-xpages/
Now in my example I did multiple values. But if instead of a HashMap or ArrayList if you kept your "selected" document id in a single value field like just a scoped variable.. then you'd get what you want. One document at a time.
I agree with Paul Stephans (also upvoted his answer because I think it would be the Nest solution) but if you insist on adding such a functionality to your viewPanel you can do this by adding a client side script to prevent the user from selecting more then one element:
First add the styleClass="rowCB" to your checkbox row and insert this code to your xpage:
<xp:scriptBlock>
<xp:this.value><![CDATA[dojo.ready(function(){
dojo.query('.rowCB>input').connect("onclick", function(evt){
var target = evt.target.id;
if(!window.crrCheckedElement){
window.crrCheckedElement = evt.target.id;
}else if(window.crrCheckedElement != target){
alert("You can select only one item!");
evt.target.checked = false;
}else if(window.crrCheckedElement == target){
window.crrCheckedElement = "";
}
})
});]]></xp:this.value>
</xp:scriptBlock>
Maby the code needs some improvement but this should be your way to go.
though maybe not the best solution, here is one possibility.
function deselectOtherDocs(viewName, currentDocId) {
var viewPanel:com.ibm.xsp.component.xp.XspViewPanel = getComponent(viewName);
var selectedIds = viewPanel.getSelectedIds();
for(var i=0; i<selectedIds.length; ++i){
if(selectedIds[i]!=currentDocId){viewPanel._xspSetIdUnchecked(selectedIds[i])}
return;
}
fire this off when a doc is checked and pass the view control name and the current doc's unid.
pardon any typos. I am writing from my phone.
edit: if you don't have to use a view control, then David Leedy's suggestion is the way to go. store the selected unid in a scope variable and let that determine which repeat row's box is selected. you might also consider using a radio button instead of a checkbox, since the former is understood as a single selector by users.

using jscolor.js on dynamic input

i'm using color picker from http://jscolor.com/
i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?
thanks
For some reason jscolor.init() did not work for me, and looking at the code I called
jscolor.installByClassName("jscolor");
function.
So...
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});
Hope it helps
I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:
jscolor.init()
This helped me
<script>
$(document).on('click', '#myPickerId', function () {
var obj = $(this)[0];
if (!obj.hasPicker) {
var picker = new jscolor.color(obj, {}); //
obj.hasPicker = true;
picker.showPicker();
}
});
</script>
In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.
Got the same problem upon adding input fields dynamically
Managed to make it work by calling
jscolor.install();
PS: jscolor v2.4.5
As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):
var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);
This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:
var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);
And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.

YUI catch form submit

I'm trying to use YUI to validate a radio button group on form submit and then do action x.
I’m new to YUI and its hard to find any examples.
Appreciate any advice, cheers.
EDIT: YUI 2.0
It would help to know which version of YUI you're using, since the APIs are wildly different. In YUI3, you could do something like this:
YUI().use('node', function(Y) {
var form = Y.one('form');
form.on('submit', function(evt) {
var radioButtons = form.all('input[type=radio]');
// do some validation
if(!valid) {
evt.preventDefault(); // prevents the form from submitting
// show error messages
}
});
});
Doing this in YUI2 is a little more verbose, as YUI2 is a little closer to the metal.
Here's a jsfiddle example on how to capture form submission and perform validation.
Hope that helps!
For YUI 1 (first version) you can use
evt.halt();

How to implement standard functionalities using SuiteScript

I'd like to build suitescript implementing same functionalities with standard function.
For instance on item detail page (List/WebSite/Items) clicking view button of any non inventory item, you could find out Convert To Inventory button.
Thanks to inspect that browser support, it shows some as follows
I want to build script that archive same functionalities like getNLMultiButtonByName('multibutton_convertinvt').onMainButtonClick(this);return false; but it throws error like getNLMultiButtonByName is not defined.
I want your help.
Regard
Probably you're looking for something similar
function onLoad(type, form, request){
if(type=='view') {
form.addButton('custpage_button','Custom Button',"getNLMultiButtonByName('multibutton_convertinvt').onMainButtonClick(this);return false;");
}
}

Resources