How to show and update current page number in an input box palceholder Using Tabulator - tabulator

I am trying to show the current page number in an input box as a place holder the issue is I can't figure out how to update the value when users go to another page.
Here is what I tried:
<input id="currentPage"/>
document.getElementById("currentPage").placeholder = tabulator_table.getPage();
Here is the first part of the question
Here is sample

You want to use the pageLoaded callback on the table instance.
When creating the table, you need to add a property for pageLoaded as a function with a parameter for the page number. This callback is triggered each time the page is loaded.
Here is a working example, https://jsfiddle.net/nrayburn/w68d75Lq/1/.
So you would do something like this, where #table is the element id for the table and input is a reference to your input element where you keep the page number value.
new Tabulator('#table', {
...tableOptions,
pageLoaded: (pageNumber) => {
input.value = pageNumber
}
});

Related

Label gets selected on clicking enter key in the tabulator cell

I have a js fiddle to show the issue that I am facing.
Tabulator 'email' column has freetext set to true to allow the user to set the value of the cell to a free text entry as follows:
editorParams:{
values:{
"steve#boberson.com":"steve",
"bob#jimmerson.com":"bob",
"jim#stevenson.com":"jim",
"harvy#david.com":"Harvy",
"ken#thompson.com":"Ken",
"denny#beckham.com":"Denny"
},
freetext:true,
searchFunc:function(term, values){
console.log("term and val "+term +" \n"+values);
var matchedEntries = {};
var matchFound = false;
for(var key in values) {
if(key.includes(term)){
matchFound = true;
matchedEntries[key] = values[key];
}
}
if(matchFound){
return matchedEntries;
}
else{
return {term: term};
}
}
}}
Select one of the values from the selector list displayed, say steve, value being 'steve#bobberson.com'.
Then after the value is selected, click on the same tabulator cell, the value displayed suddenly changes to the label.When user clicks enter key now, the label is selected instead of the value,.ie. steve will be displayed instead of steve#bobberson.com
If this is not a bug, how do I make sure that the value steve#bobberson.com remains selected after clicking enter. This is because freetext option is set to true in the editorParams of the column
Attached a gif showing the issue
That is not a bug,
With freetext enabled, users are able to enter any text they like in that field and it will be saved which is exactly what is happening in the example
If they select the email address again from the list then it is correctly saved.
It is an either/or scenario, you can either restrict the users to selecting specific values from the list OR you can allow them freetext in which case anything goes.
If you want a different behaviour then you can always build a custom editor that works in the way you want. Checkout the Custom Editor Documentation for more information

beforePageLoad failing when a view column is computed

I've got a view control which opens an xpage. When the xpage opens, the beforePageLoad event fires. It checks to see if there are any attachments in a particular field of the document being opened and if there are, it returns list of the filenames. This was working fine. Then, I was asked to change what's displayed in one of the columns of the view. I added a variable to the view control's data section to access the row. I then added some javascript to the column to display the data differently. That worked and it displayed the data as wanted. However, when I now click on the link to open the xpage, when the beforePageLoad event fires, the code that's there now fails. It fails with this error at the starred line:
Script interpreter error, line=9, col=49: 'closureField' is null at
[/Function_ReturnListOfClosureAttachmentNames.jss].ReturnListOfClosureAttachmentNames(CCEB1351591847CB85257E7C005EF68C)
function ReturnListOfClosureAttachmentNames(ltDoc ){
var closureAttachmentFileNames = "";
var thisLT = ltDoc;
var closureField:NotesRichTextItem = thisLT.getFirstItem("closeAttachments");
*>>> var eos:java.util.Vector = closureField.getEmbeddedObjects();<<<
var eosi:java.util.Iterator = eos.iterator();
while (eosi.hasNext()) {
var eo:NotesEmbeddedObject = eosi.next();
closureAttachmentFileNames = closureAttachmentFileNames +","+eo.getName();
}
return closureAttachmentFileNames;
}
I call this function from the beforePageLoad event and pass it currentDocument.getDocument(). I think I might have lost the document context after changing the column display data from 'view column' to 'computed value' but I'm not sure. Any ideas would be appreciated.
thanks!
Clem
Figured it out: When I assigned a variable to the view, when you click on a linked column in that view, it loads the current ViewEntry into the context and not a current document. So I put the unid of the doc from the selected ViewEntry in an application scope variable and returned it to the Document Id property when I open the xPage. I have to now update all my views but there aren't too many luckily. Thanks for working through this with me!
Clem –

Conditional validation not working for one field

I've 4 fields as shown below:
radioGroup1 is required if comboBox2 value and radioGroup4 & radio1 are blank. The validation message is suppose to go away if only one of 3 radio's is selected
If I select radioGroup1 or radio1 and update page, the validation message does not display.
If I select radioGroup4 and update page, the validation message is still displayed.
Here is a screen shot:
Here is a validation code for radioGroup1:
var comboBox2:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox2");
var radio1:com.ibm.xsp.component.xp.XspInputRadio = getComponent("radio1");
var radioGroup4:com.ibm.xsp.component.xp.XspSelectOneRadio = getComponent("radioGroup4");
var radioGroup3:com.ibm.xsp.component.xp.XspSelectOneRadio = getComponent("radioGroup3");
if(comboBox2.getValue()!==''){
if(radioGroup3.getValue()==null){
if(radioGroup4.getValue()==null && radio1.getValueAsString()==''){
return true;
}else {
return false;
}
}
}
In second image there is a computed field capturing value of radioGroup4.
What am I doing wrong? When page is refreshed, radioGroup4.getValue() works in computed field but not in the validation script for radioGroup3.
When any one of 3 radio control selected, the other two are disabled thru script and it is working without any issue.
Resolved this issue as follows:
radioGroup4 was executing script and doing full update in the onChange event. Changed it to onClick event
It need two clicks in the radioGroup4 and required message for radioGroup3 vanishes.
This is not a perfect solution but I've to leave with it until I found perfect one.

getting a list of forms that contain a specified field, is there a better method

The following code is a script object on an XPage in it I loop through an array of all the forms in a database, looking for all the forms that contain the field "ACIncludeForm". My method works but it takes 2 - 3 seconds to compute which really slows the load of the XPage. My question is - is there a better method to accomplish this. I added code to check to see if the sessionScope variable is null and only execute if needed and the second time the page loads it does so in under a second. So my method really consumes a lot of processor time.
var forms:Array = database.getForms();
var rtn = new Array;
for (i=0 ; i<forms.length; ++i){
var thisForm:NotesForm = forms[i];
var a = thisForm.getFields().indexOf("ACIncludeForm");
if (a >= 0){
if (!thisForm.isSubForm()) {
if (thisForm.getAliases()[0] == ""){
rtn.push(thisForm.getName() + "|" + thisForm.getName() );
}else{
rtn.push(thisForm.getName() + "|" + thisForm.getAliases()[0] );
}
}
}
thisForm.recycle()
}
sessionScope.put("ssAllFormNames",rtn)
One approach would be to build an index of forms by yourself. For example, create an agent (LotusScript or Java) that gets all forms and for each form, create a document with for example a field "form" containing the form name and and a field "fields" containing all field names (beware of 32K limit).
Then create a view that displays all these documents and contains the value of the "fields" field in the first column so that each value of this field creates one line in this view.
Having such a view, you can simply make a #DbLookup from your XPage.
If your forms are changed, you only need to re-run the agent to re-build your index. The #DbLookup should be pretty fast.
Place the form list in a static field of a Java class. It will stay there for a long time (maybe until http boot). In my experience applicationScope values dissappear in 15 minutes.

How can I set the default value in a SharePoint list field, based on the value in another field?

I have a custom list in SharePoint (specifically, MOSS 2007.) One field is a yes/no checkbox titled "Any defects?" Another field is "Closed by" and names the person who has closed the ticket.
If there are no defects then I want the ticket to be auto-closed. If there are, then the "Closed by" field ought to be filled in later on.
I figured I could set a calculated default value for "Closed by" like this:
=IF([Any defects?],"",[Me])
but SharePoint complains I have referenced a field. I suppose this makes sense; the default values fire when the new list item is first opened for entry and there are no values in any fields yet.
I understand it is possible to make a calculated field based on a column value but in that case the field cannot be edited later.
Does anyone have any advice how to achieve what I am trying to do?
Is it possible to have a "OnSubmit" type event that allows me to execute some code at the point the list item is saved?
Thank you.
Include a content editor web part in the page (newform.aspx / editform.aspx) and use jQuery (or just plain javascript) to handle the setting of default values.
Edit: some example code:
In the lists newform.aspx, include a reference to jquery. If you look at the html code, you can see that each input tag gets an id based on the field's GUID, and a title that's set to the fields display name.
now, using jquery we can get at these fields using the jQuery selector like this:
By title:
$("input[title='DISPLAYNAMEOFFIELD']");
by id (if you know the field's internal guid, the dashes will ahve to be replaced by underscores:
// example field id, notice the guid and the underscores in the guid ctl00_m_g_054db6a0_0028_412d_bdc1_f2522ac3922e_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_ctl00_TextField
$("input[id*='GUID']"); //this will get all input elements of which the id contains the specified GUID, i.e. 1 element
We wrap this in the ready() function of jQuery, so all calls will only be made when the document has fully loaded:
$(document).ready(function(){
// enter code here, will be executed immediately after page has been loaded
});
By combining these 2 we could now set your dropdown's onchange event to the following
$(document).ready(function(){
$("input[title='DISPLAYNAMEOFFIELD']").change(function()
{
//do something to other field here
});
});
The Use jQuery to Set A Text Field’s Value on a SharePoint Form article on EndUserSharePoint.com shows you how to set a default value for a field using JavaScript/jQuery.
They also have a whole series of articles on 'taming calculated columns' that will show you many more powerful options you have for calculated fields with the use of jQuery.
One thing to be aware of when inserting JavaScript into a SharePoint page and modifying the DOM is support. There is a small chance that a future service pack will break the functionality you add, and it is quite likely that the next version of SharePoint will break it. Keeping this mind however, I believe it's a good solution at this time.
I've got a walk through with sample code that may help
Setting a default duration for new calendar events
It sets the End Time/Date fields to Start Time + 1.5 hours when you create a new event.
Its complicated a little by the steps need to do the time/date work, but you'll see examples of how to find the elements on the form and also one way to get your script onto the newform.aspx without using SPD.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
// Set the hours to add - can be over 24
var hoursToAdd = 1;
// Mins must be 0 or div by 5, e.g. 0, 5, 10, 15 ...
var minutesToAdd = 30;
// JavaScript assumes dates in US format (MM/DD/YYYY)
// Set to true to use dates in format DD/MM/YYYY
var bUseDDMMYYYYformat = false;
$(function() {
// Find the start and end time/minutes dropdowns by first finding the
// labels then using the for attribute to find the id's
// NOTE - You will have to change this if your form uses non-standard
// labels and/or non-english language packs
var cboStartHours = $("#" + $("label:contains('Start Time Hours')").attr("for"));
var cboEndHours = $("#" + $("label:contains('End Time Hours')").attr("for"));
var cboEndMinutes = $("#" + $("label:contains('End Time Minutes')").attr("for"));
// Set Hour
var endHour = cboStartHours.attr("selectedIndex") + hoursToAdd;
cboEndHours.attr("selectedIndex",endHour % 24);
// If we have gone over the end of a day then change date
if ((endHour / 24)>=1)
{
var txtEndDate = $("input[title='End Time']");
var dtEndDate = dtParseDate(txtEndDate.val());
if (!isNaN(dtEndDate))
{
dtEndDate.setDate( dtEndDate.getDate() + (endHour / 24));
txtEndDate.val(formatDate(dtEndDate));
}
}
// Setting minutes is easy!
cboEndMinutes.val(minutesToAdd);
});
// Some utility functions for parsing and formatting - could use a library
// such as www.datejs.com instead of this
function dtParseDate(sDate)
{
if (bUseDDMMYYYYformat)
{
var A = sDate.split(/[\\\/]/);
A = [A[1],A[0],A[2]];
return new Date(A.join('/'));
}
else
return new Date(sDate);
}
function formatDate(dtDate)
{
if (bUseDDMMYYYYformat)
return dtDate.getDate() + "/" + dtDate.getMonth()+1 + "/" + dtDate.getFullYear();
else
return dtDate.getMonth()+1 + "/" + dtDate.getDate() + "/" + dtDate.getFullYear();
}
</script>

Resources