Custom Autocomplete in Google spreadsheet app - javascript

My question is the following, is there any tutorial about how to make that when you begin typing on a google spreadsheet cell, the fields belonging to a custom list that contains (anywhere on the text) the typed characters appears in a drop down list.
I do not know a lot of Javascript, so if there's any book or reference where I can found something similar it would be really appreciated.

I am new, and I don't know of any method for allowing the selection of valid values
to be position based upon what the user starts typing (into a cell).
I know this cannot be done within a script. All scripts run after the user
has made all of their changes (to a cell).
You may already know about a drop-down validation list using defined ranges.
This process puts a small down arrow adjacent to the right-edge of the box.
It allows the user to select from a pre-defined list. It does not prevent
the end user from entering invalid values. It just marks their value as
invalid if it does not agree with one of the entries in the list. And
by pressing the down-arrow, the list of valid values is displayed. The
user can select an entry in the list by clicking on it.
I learned about this validation from the documentation. If that is all you need
then you can stop here.
To me the interesting thing about this validation method is:
you can define the list and give it a name. The invalid error message will include the name. You can use the name to indicate the type of validation error.
The list can be contained on a different sheet other than were it is referenced. The sheet that contains the list can be hidden.
If you add a row to the list area that is not the bottom row, (insert below) the spreadsheet engine will automatically adjust the size of the defined range. The new values entered in the list appear in the updated drop-down list (in the order that they appear in the range definition).
What I have not tested is expanding the list from a script. I don't
know if the spreadsheet engine will perform the same range modification
if the change comes from a script. I would hope that it would.
Also I don't know if you make a changes to a hidden sheet from a script,
then will the hidden sheet remain hidden. I know when you do a "copy sheet"
function from a script, the source sheet is temporarily made current,
and is therefore no longer hidden.
Hope this helps.

Related

Can I control handstontables autocomplete edtors initial value?

With Handsontable, I use autocomplete columns to let users choose from a list of pre defined names. But when the user selects a name I don't actually store that name on my data object, I store an id connected to the name. The id is also what is available on the data when the table is loaded initially.
This means that I need a function to go from id to name and vice versa which I have. I use the id to name function in my renderer and I use the name to id function in beforeChange, so that the output contains the id.
Here is my problem:
If I select a cell with a name rendered and I press enter, I now see the id instead of the name. Is there some way I can change the behavior of the editor so that the name is shown instead of the id?
Everything else seems to work. If I for instance select a cell and start typing, it now contains what I typed and the autocomplete works as expected. I would like to have the same behavior when pressing enter on a cell.
I ended up using a solution where I do the translation on all the data when it is loaded. When I then extract data from the sheet I translate it back.
I encountered a similar problem with the date editor where I wanted to go back and forth between the user date format and our normalized date format. Handsons editors are not that easy to work with and especially the date editor receives dates in different formats on setValue.
The solution feels a bit hacky but at the same time there will only be on these two occasions when data is transformed which makes it less plausible that there will be any errors compared to if I were to transform on render, data entry, validation etc. With this solution I know that as long as we are in the sheet, the data is what the user sees.

Get selected cell value, row, and column from Excel

Just looking to be pointed in the right direction about how I should do this.
Background: Creating a program which will automatically fill out excel pricing files for our customers from our database based on the UPC. However, there's over a hundred different sheets because customers want them sent in their own format. Some in very weird formats. I don't want to hard code the columns/locations for UPC, price, etc. (sections that need to be filled out), as the sheets sometimes change and we get new customers. Therefore, I'm going to put the power in the users hands to map the locations of the UPC column, etc. I currently use excel interop in C# to do the excel file reading/filling out, however the mapping user panel is what I need help with.
What I would like to do: I'm comfortable with modifying an excel file in the background. However, I would like the mapping to work as such. I could easily say: "UPC Column Header" and the user puts in B10 in a text box and so on. What I would rather do is have the previous mappings for that customer in the text boxes, a check to see if the text is the same (same cell text value as before), and then an error if the column header cell text doesn't match the previous mapping stored in a db. I'm fine and dandy with the database portion to store/check the mappings, but here is my conundrum... and I may be putting more work on myself.
The conundrum is: I would like the user to be able to view the selected excel sheet and click on a cell to select a new mapping in the program, or to map a new excel sheet. So it would say: "Click the UPC header," and so on in order to fill out the mapping form. How would you go about this?
I'm a C#/ASP.NET web developer with decent Javascript experience and would like to keep it as a web app (to avoid having to update the program based on my changes for the user). However, I'm willing to go down different avenues/languages.

How to highlight multiple search results in input multiple textareas

I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.
The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.

Javascript (Adobe Acrobat XI) populate 2nd page form from inputted answers from 1st page in form

I want to start by saying I'm NOT fluent in javascript, however, I am learning and can read the code and comprehend it. I make professional fillable PDF forms, using javascript to perform actions and calculations, but I've never had to do this before. My request is specifically for Adobe Acrobat XI Pro javascript.
I have an order form I created. I've added a button (called 'Create Invoice')on the page to adds a page (using:var a = this.getTemplate("Invoice");
a.spawn();) after the order form that presents the information that was entered or calculated from the first page. I ONLY want to show fields on the invoice that were selected on the first page.
Here's a screen shot [link] of a portion of the Order Form (pg 1):
[IMG]http://i61.tinypic.com/iqk3sm.jpg[/IMG]
(I can't post images until 10 reputation)
So on the Invoice (pg 2) I want ONLY the (2) items chosen above to show, in immediate succession:
[IMG]http://i58.tinypic.com/o59jt3.jpg[/IMG]
(I can't post images until 10 reputation)
The DESCRIPTION column will ideally concatenate the "Saddle Name" + "Color". The rest of the columns should be obvious (fill in with the associated fields for each item ordered).
So, what should the code look like for this? And should the Javascript be put onto a field or Document Javascripts?
(This is my first stackoverflow post, I apologize if I did anything wrong!)
So, the first page is a static page where the user fills the table as such. And the second page should have a well-ordered list of the ordered items.
The first page should be pretty straightforward, with hierarchical field naming (but it may be a good idea to have the line number not at the end (as Acrobat does when you multiply the selected fields), but in the middle of the file name(s). This would then allow you to handle lines in a much simpler way. The same principle would apply for page 2.
After spawning the second page, you loop through the rows on page 1, and if the number of items is not equal to its default, fill the table on page 2.
In order to be able to delete an order again, it might be useful to completely reset the table on page 2, and fill it up from new; here smart field naming will gain you a lot of time.
You would add that code (including calculation of totals etc.) in the Calculate event of a hidden field which is only used as a carrier for all calculations, including building totals etc.

jQuery / Javascript > onClick place text at last known cursor position

I have a form I'm working with that allows the user to continually add new rows as needed (used for making an article with multiple "howto" steps, they can click over and over again to add a new step). What I would like to be able to do is have the user be able to click in any of those rows at any time and then click on a word or button that is off to the side that will then insert the value of that button into the last known cursor position.
So for example I may have one form that currently has 3 rows. If the user goes back and wants to insert some data they could click back in the box and hit the button corresponding to the data they want to insert.
Example input 1: "Remove the customers current IP address and replace with their static IP, [USER COULD CLICK HERE AND THEN CLICK THE STATIC IP BUTTON AND %STATIC_IP% WOULD BE INSERTED AT THE LAST KNOWN CURSOR POSITION (AKA HERE)]
Example input 2: "Enter in the customers [Click to insert %WIFI_SSID%] into the router settings"
I have found several other stackoverflow articles that are able to all insert text but they all expect it to be into a defined textarea or input. In this case I'm needing it to insert into the last known cursor position. I hope this is all clear. I look forward to any assistance or questions.
Starter code: http://jsfiddle.net/4mJwU/
If you already know how to insert some arbitrary content at the last known caret position, your only problem is to know which field was focues last time before button was clicked.
That can be done in numerous number of ways, one of those would be utilize focus and blur events (attached to fields - rows in your case) to track (in some variable for example) reference to the field last focused. It should be a piece of cake from there.
Quick and simple script that can get you started http://jsfiddle.net/sjqWu/1/
Combine what you've learned from other stackoverflow anwsers with example above and you should be ok. Happy learning!
I'd question your design. To make the user have to click a field then click some text to insert into that field seems like too many steps. You could possibly utilize some sort of drag and drop routine. Or instead of the first click being a text box, maybe make it a drop down list?
I agree with WTK. You can store the record id or text box id using some sort of event, then proceed from there.

Categories

Resources