I'm using iAd producer to create HTML widgets for iBooks I'm making using iBooks Author. I've done some research and learned that I can have user input saved into local storage by way of a variable that is called every time the widget is opened. This is great except for the new problem of having to create hundreds of text box widgets all with different variables so I can use these text boxes on multiple pages. Is there a way for me to automate this using Java Script? One idea I had was to use a "while" function to tell the script to ++ the variable if the one it tried to use was not empty. Example: the variable "001" was already used so the code would ideally set the next user text to variable "002". Preferably, I'd like to be able to create one widget with this code that I could reuse anywhere else.
Here is the code I'm currently using:
/*Widget code*/
this.onViewControllerViewWillAppear = function (event) {
var theValue = this.outlets.textField;
if (localStorage.getItem("theKey102") === null) {
theValue.value = "";
} else {
theValue.value = localStorage.getItem("theKey102");
}
};
/*This is the code for one of the text boxes I'm using */
this.onControlValueChange = function (event) {
var theValue = this.viewController.outlets.textField;
localStorage.setItem("theKey102", theValue.value);
};
Related
I am working with a Google App Script web app that is going to be used to display student micro-credentials. The goal is to make it so I can use a dropdown to choose which classes are displayed. I have created the dropdown on the web app by copying from W3Schools, but it doesn't actually function. I need some help getting the dropdown to do what I need it today.
In the example screen you can see the view I have set up and the dropdown with three classes:
The data for this web app is stored on a Google Sheet, like this:
And the doGet looks like this:
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
var pictures = getPictures(classSelection);
var names = getNames(classSelection);
var cutBelts = getCutBelts(classSelection);
var measureBelts = getMeasureBelts(classSelection);
var bindBelts = getBindBelts(classSelection);
var classSize = 10;
if(pictures.length<10){
classSize=pictures.length;
}
htmlOutput.pictures = pictures;
htmlOutput.names = names;
htmlOutput.cutBelts = cutBelts;
htmlOutput.measureBelts = measureBelts;
htmlOutput.bindBelts = bindBelts;
htmlOutput.classSize = classSize;
return htmlOutput.evaluate();
}
Where the variable "classSelection" is equal to the name of the class (101, 201, or 202) and the five 'get' functions (getPictures, getNames) return the picture, names, etc for that class as an array.
Okay, so here is my specific issue I need help with.
How do I get the dropdown to send data (the class) back to the doGet so that the variable "classSelection" updates and displays only the selected class?
Again, for the code I used to create the dropdown (html, css, and script) see this link, I literally copy-pasted and only changed the drop down titles 😊
I am making a program where I have a user input where the user types in their cat's name, and then I want the name to appear in the text throughout the program. Here is my code, it is in Javascript:
var catName = getText("nameInput");
onEvent("startBtn", "click", function(event) {
setScreen("feedingScreen");
setText("feedingText", catName+" is hungry! Give "+catName+" some food!
Click fish to feed.");
});
Whwn I run this program, however, the cat name does not appear in the text. How can I make it where the text does show up?
If the catName variable is going to be used for a long time, I'd consider using localStorage to store it and retrieve it whenever I want (even when the user leaves the page and comes back).
Example :
function setCatName(name) {
window.localStorage.setItem('catName', name);
}
function getCatName() {
return window.localStorage.getItem('catName');
}
If you don't want that though, you could store it in the window object. Take note that it's considered bad practice (but so are global variables in general).
Example :
function setCatName(name) {
window.catName = name;
}
function getCatName() {
return window.catName;
}
UPDATE :
It's funny because the examples on Mozilla's Docs use localStorage to set and retrieve a cat's name too :
localStorage documentation
I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.
~sitecollection/site/folder/folder/file.js
And
~site/folder/folder/file.js
The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?
Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields = {
// Add field and point it to your rendering function
"Title": { "View": overrideTemplate },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).
~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js
You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!
I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.
Hope this helps.
Here is a drop down list in SmartClient: http://www.smartclient.com/#dropdownGrid.
I want to make a selection using JavaScript. Like, I run some JavaScript in console, and the drop list will select a specific item.
I did some research, found a code snap to do this (the code is in Java, but I think there should be similar functions in JavaScript):
Record rec = perdomainGrid.getRecordList().find("domaine_id", domaine_id);
perdomainGrid.selectSingleRecord(rec);
If I want to make selection, first I need to obtain perdomainGrid object. In my above giving link, the drop down list id in GWT is exampleForm (can be seen in dropDownGrid.js tab). I try to get the object by:
var form = isc.DynamicForm.getById("exampleForm");
form does exist, but there is no getRecordList() function on it, there is selectSingleRecord() function on it though.
I try to check form's class by form.className, its value is normal. I don't know what does that mean.
I'm kind of confused now. Could somebody help me on this?
isc_SelectItem_5 has a function called pickValue(), it takes one parameter SKU. This function can be used to select item.
var itemName = "Letter Tray Front Load Tenex 200 Class Blk #23001";
var data = isc_SelectItem_5.optionDataSource.cacheData;
var targetSKU = data.find(function(e) {
if (e.itemName == itemName) {
return e;
}
}).SKU;
isc_SelectItem_5.pickValue(targetSKU);
I'm building my first Chrome extension. It's a very simple thing I'm trying to do at this point so I can try and gain an understanding of how it works and build off of that.
Anyway what I am trying to do right now is I have a extension button that opens up a page with a TEXTAREA. I want the user to be able to enter text into this textarea box and save this to be called later (this setting also needs to be available to be called again the next time Chrome is opened, whatever they enter into this textbox I want to keep that value permanently unless they save over it).
My TEXTAREA id=test1
Here's my JavaScript
function saveSettings() {
var storage = chrome.storage.sync;
// Get signature value from text box
var txtValue = test1.value;
// Save using Chrome storage API
storage.set(txtValue, function() {
console.log("Saved");
});
}
function insertText(text) {
document.getElementById("test1").value= text;
}
For testing purposes I have a addEventListener for inserting a set text value to make sure the insert function works. I have a button for a hard coded set of text, then another button to try to insert the "saved" text which should be the var txtValue.
The insert function that WORKS
document.addEventListener('DOMContentLoaded', function() {
var temp = document.getElementById('template');
temp.addEventListener('click', function() {
insertText('Hard Coded Text');
message('Template Inserted');
});
});
The insert function that does NOT work that is trying to insert the value typed into and saved into the TEXTAREA field.
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('insert');
link.addEventListener('click', function() {
insertText(txtValue);
message('Saved Text Inserted');
});
});
I'm not sure what I'm doing wrong. I've looked at a bunch of different examples and most of them are similar to what I've done using storage.sync but I can't seem to get it to work.
Any thoughts would be greatly appreciated.
Thank you!
to save
chrome.storage.sync.set({ mytext: txtValue });
to get
chrome.storage.sync.get('mytext', function(data) {
yourTextArea.value = data.mytext;
});
I found a new library to call chrome storage with Promise, pretty cool.
https://github.com/Selection-Translator/chrome-call
import { scope } from 'chrome-call'
const storage = scope('storage.local')
storage('get', 'flows').then(data => initFlows(data.flows))