I currently have nouislider working fine. However I would like to add a postfix "%" symbol to my input fields, to show the user that the value is a percentage value, and the problem I'm having is that the value being passed with the form includes the % symbol. Does anyone know a workaround so that only the value is passed with the form?
An alternative method that I tried, to the format:wNumb method suggested in the nouislider documentation is as follows:
slider.noUiSlider.on('update', function( values, handle ) {
moistureValues[handle].value = values[handle] + '%';
});
However this is still appending the percentage symbol to the url. Is there any other way that would solve this problem? Thanks
The value of the input is the value that is submitted, this is how the basic feature in HTML works. You have some options:
Place the % sign in a <span> after the input.
use addEventListener('submit', ...) on the form, capture the submit, then change the input value and re-submit it (using .submit()).
Displaying the entire value in a span, and using a separate (hidden) input for the submit value.
(disclosure: I'm the lead developer for this libary).
You are changing the value while you only need to change the style of the element:
connectBar.style[side] = offset + '%';
Full example:
var connectSlider = document.getElementById('connect');
noUiSlider.create(connectSlider, {
start: [20, 80],
connect: false,
range: {
'min': 0,
'max': 100
}
});
var connectBar = document.createElement('div'),
connectBase = connectSlider.getElementsByClassName('noUi-base')[0],
connectHandles = connectSlider.getElementsByClassName('noUi-origin');
// Give the bar a class for styling and add it to the slider.
connectBar.className += 'connect';
connectBase.appendChild(connectBar);
connectSlider.noUiSlider.on('update', function( values, handle ) {
// Pick left for the first handle, right for the second.
var side = handle ? 'right' : 'left',
// Get the handle position and trim the '%' sign.
offset = (connectHandles[handle].style.left).slice(0, - 1);
// Right offset is 100% - left offset
if ( handle === 1 ) {
offset = 100 - offset;
}
connectBar.style[side] = offset + '%';
});
See the example here: https://refreshless.com/nouislider/examples/#section-custom-connect
Related
I have recently discovered Tabulator.js and its possibility to have e. g. the average of all values of a column at the bottom.
I wondered whether one can also have the minimum and maximum instead of just one thing. I did not find that in the docs, but it might be possible by extending the library? (I would not want to have one at the top, and as I need more than two calculations, that would not be a solution anyway.)
This is similar to another answer recently for the topCalc property.
You can put, effectively, whatever you want in a footer row. Use the bottomCalc and bottomCalcFormatter properties of the column definition along with a custom function to get the appropriate content.
In the custom function you can use bult in functions such as the table.getCalcResult() method.
eg: return an array of sum, average, count
let table = new Tabulator("#my-table-id", {
...
columns:[
...
{
title: 'My col',
...,
bottomCalc: function(v, d, p) {
// v - array of column values
// d - all table data
// p - params passed from the column definition object
let res = table.getCalcResults();
// eg Get sum and count for a column with id 'C1'
let c1_calc = 0, c1_count = 0;
d.forEach(function(row) {
c1_calc += row["c1"];
c1_count++;
});
return [
(parseInt(res.bottom["COL_1_ID"], 10) + parseInt(res.bottom["COL_2_ID"], 10)),
(parseInt(res.bottom["COL_1_ID"], 10) + parseInt(res.bottom["COL_2_ID"], 10)) / 2,
c1_calc,
c1_count
];
}
}
],
...
);
Once you have the content you can use a custom formatter to display it nicely.
See Custom Calculation Function and Calculation Results in the docs.
I have updated my Codepen again to add a bottomCalc function and formatter. See the definition for the AggregateFn column, the getBottomAggregate function that implements it and the bottomAggregateFormatter function that formats it.
Hope that helps.
Im using pdfkit to generate pdf invoice.
When all my content fit in one page I have no issue.
However when it doesn't fit and need an extra page, I have a strange behaviour:
Instead of adding the elements in the second page, it only add one line and the rest of the page is blank.
Then on 3rd page I have another element, and the rest it blank, then 4th page, 5th etc.
Here is the code corresponding to this part:
for (let i = 0; i < data.items.length; i++) {
const item = data.items[i];
this.itemPositionY = this.itemPositionY + 20;
if (item.bio) this.containBioProduct = true;
let itemName = item.bio ? `${item.item}*` : item.item;
this.generateTableRow(
doc,
this.itemPositionY,
itemName,
"",
this.formatCurrency(item.itemPriceDf.toFixed(2)),
item.quantity,
this.formatCurrency(item.itemPriceTotalDf.toFixed(2))
);
this.generateHr(doc, this.itemPositionY + 15);
}
Basically I just iterate over an array of products. For each line my Y position has +20.
Thanks for your help.
In case someone has this issue, here is a solution:
Everywhere in the code I know that an extra page could be generated, I add this:
if (this.position > 680) {
doc.addPage();
this.position = 50;
}
It allows you to control the generation of new pages (instead of pdfkit doing it automatically with potential problems)
You just need to track the position from the initialization of "this.position".
In that way, evertime it's superior than an Y position (680 in my case, it's a bit less than a page with pdfkit), you just do "doc.addPage()", which will create another page, and you reinitialize your position to the beginning of the new page.
I am trying to use the toolbar search feature to search through a number of SwipeableContainers. Each container has a MultiButton on top and a number of buttons bottom left and bottom right. Essentially I receive data from a database and loop through the result adding a SwipeableContainer and set each one with a name (Line1 of the MultiButton) using sc.setName(). I then attempt to search using the code below:
Here is the code:
hi.getToolbar().addSearchCommand(e -> {
String text = (String)e.getSource();
if(text == null || text.length() == 0) {
// clear search
for(Component cmp : centercont) {
cmp.setHidden(false);
cmp.setVisible(true);
}
centercont.animateLayout(150);
} else {
text = text.toLowerCase();
for(Component cmp : centercont) {
SwipeableContainer sc = (SwipeableContainer)cmp;
String scName = sc.getName();
boolean show = text.length() == 0 || scName.toLowerCase().contains(text);
sc.setHidden(!show);
sc.setVisible(show);
}
centercont.animateLayout(150);
}
}, 4);
After I input the first character into the search I get this exception: java.lang.ClassCastException: com.codename1.ui.Label cannot be cast to com.codename1.ui.SwipeableContainer. If I press 'OK' past the error dialog, the search filters the options as expected for that 1 character. I get the same exception and result for the next character and so on.
I would appreciate some guidance on where I have gone wrong.
You have more than one component within centercont. One of them is a SwipeableContainer and the other is a Label.
You can workaround it by checking with instanceof before doing the cast but you might want to check your code/component inspector to see what's that label and if it should be there.
#bknights posted an good answer to another question around populating a sublist in a suitelet.
However, my question follows on from that when using bk's code:
function getJoinedName(col) {
var join = col.getJoin();
return join ? col.getName() + '__' + join : col.getName();
}
searchResults[0].getAllColumns().forEach(function(col) {
sublist.addField(getJoinedName(col), 'text', col.getLabel());
nlapiLogExecution('DEBUG', 'Column Label', col.getLabel());
});
var resolvedJoins = searchResults.map(function(sr) {
var ret = {
id: sr.getId()
};
sr.getAllColumns().forEach(function(col) {
ret[getJoinedName(col)] = sr.getText(col) || sr.getValue(col);
});
return ret;
});
sublist.setLineItemValues(resolvedJoins);
The above works with a standard search with no formulae... How can we do this when I have multiple search columns which are formulae?
Using API1.0
In your search definition add a label to all formula columns. Then your column keys can be derived like:
function getJoinedName(col) {
if(col.getName().indexOf('formula') === 0 && col.getLabel()){
return 'lbl_'+ col.getLabel().toLowerCase();
}
var join = col.getJoin();
return join ? col.getName() + '__' + join : col.getName();
}
You can just get all the columns of the search result. columns = result[0].getColumns(). The reference the column where the formula column is. So if you look in the UI and it is the third from the top, you can get the value using result[0].getValue(columns[2])
This solution is dependent on the order of rows not changing.
Also if your saved search has labels for the Formulas, you can just use the labels as the field id.
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>