Interaction between fancy-settings options and popup.html - google-chrome-extension

my extensions features a simple frame include in popup.html
Based on the setting a user sets in options.html (supported by [fancy-settings) the frame url should be changed accordingly.
For example:
If setting is country = Deutschland
then include the following frame into popup.html
<script type="text/javascript">
var n = Math.floor(Math.random()*11);
document.write("<iframe src='http://sms.dynamicdrive.de/sms.php?" + n + "308307246028BA119A119A119A46A101A117A114A111A112A97A102A105A110A97A110A122A46A100A101' scrolling='no'></iframe>")
</script>
If country = Polska then use a different frame url.
How can I realise this?
I read through the documentation of fancy settings but didn't fully get it.

I assume you are using this fancy-settings. Basing on the documentation I think that your code should look like this:
var settings = new Store("settings", {
"country": "Deutschland",
});
var country = settings.get('country');
var n = Math.floor(Math.random()*11);
if(country == 'Deutschland') {
document.write("<iframe src='http://sms.dynamicdrive.de/sms.php?" + n + "blablabla' scrolling='no'></iframe>");
} else if(country == 'Poland') {
document.write("<iframe src='http://some.url.pl/sms.php?" + n + "blablabla' scrolling='no'></iframe>");
}
Just replace the URLs, store name (if you are not using the default 'settings' store) and default country value.

Related

Netsuite: how to add a custom link to the Nav Bar or Header

Is there any way to customize the Nav Bar or the Header to have a custom link?
The use-case is that I have a JIRA issue collector that is driven by javascript. I would like the user to provide feedback from the page they are having issues. However, any solution I can come up with so far takes the user away from the current page.
Example of what I have that takes the user away:
I currently have a Suitelet that is in one of the menus. That Suitelet invokes javascript but even then the user is taken away.
I have a workflow on the case record that calls some Javascript Javascript in one of the UI-based action's conditions is invoked. Similar to #1 but on the case record.
I'm thinking I'm going to need to create and public a chrome extension for my company's domain just to get a pervasive bit of javascript to run for all pages...seems like a sledgehammer.
I hope someone can prove me wrong, but as far as I am aware there is no way to natively inject Javascript or anything into the NetSuite header/navbar - they don't offer customisation to the header/navbar.
I've resorted to creating a Userscript that I load through the Violent Monkey extension for Chrome or Firefox.
Example Userscript Template
// ==UserScript==
// #name NetSuite Mods (Example)
// #namespace Violentmonkey Scripts
// #match *.netsuite.com/*
// #include *.netsuite.com/*
// #grant GM_addStyle
// #version 1.0
// #author Kane Shaw - https://stackoverflow.com/users/4561907/kane-shaw
// #description 6/11/2020, 6:25:20 PM
// ==/UserScript==
// Get access to some commonly used NLAPI functions without having to use "unsafeWindow.nlapi..." in our code
// You can add more of these if you need access to more of the functions contained on the NetSuite page
nlapiSetFieldText = unsafeWindow.nlapiSetFieldText;
nlapiSetFieldValue = unsafeWindow.nlapiSetFieldValue;
nlapiGetFieldText = unsafeWindow.nlapiGetFieldText;
nlapiGetFieldValue = unsafeWindow.nlapiGetFieldValue;
nlapiSearchRecord = unsafeWindow.nlapiSearchRecord;
nlobjSearchFilter = unsafeWindow.nlobjSearchFilter;
nlapiLookupField = unsafeWindow.nlapiLookupField;
nlapiLoadRecord = unsafeWindow.nlapiLoadRecord;
nlapiSubmitRecord = unsafeWindow.nlapiSubmitRecord;
GM_pageTransformations = {};
/**
* The entrypoint for our userscript
*/
function GM_main(jQuery) {
// We want to execute these on every NetSuite page
GM_pageTransformations.header();
GM_pageTransformations.browsertitle();
// Here we build a function name from the path (page being accessed on the NetSuite domain)
var path = location.pathname;
if(path.indexOf('.')>-1) path = path.substr(0,path.indexOf('.'));
path = toCamelCase(path,'/');
// Now we check if a page "GM_pageTransformations" function exists with a matching name
if(GM_pageTransformations[path]) {
console.log('Executing GM_pageTransformations for '+path);
GM_pageTransformations[path]();
} else {
console.log('No GM_pageTransformations for '+path);
}
}
/**
* Changes the header on all pages
*/
GM_pageTransformations['header'] = function() {
// For example, lets make the header background red
GM_addStyle('#ns_header, #ns_header * { background: red !important; }');
}
/**
* Provides useful browser/tab titles for each NetSuite page
*/
GM_pageTransformations['browsertitle'] = function() {
var title = jQuery('.uir-page-title-secondline').text().trim();
var title2 = jQuery('.uir-page-title-firstline').text().trim();
var title3 = jQuery('.ns-dashboard-detail-name').text().trim();
if(title != '') {
document.title = title+(title2 ? ': '+title2 : '')+(title3 ? ': '+title3 : '');
} else if(title2 != '') {
document.title = title2+(title3 ? ': '+title3 : '');
} else if(title3 != '') {
document.title = title3;
}
}
/**
* Changes app center card pages (dashboard pages)
*/
GM_pageTransformations['appCenterCard'] = function() {
// For example, lets make add a new heading text on all Dashboard pages
jQuery('#ns-dashboard-page').prepend('<h1>My New Dashboard Title</h1>');
}
/**
* Convert a given string into camelCase, or CamelCase
* #param {String} string - The input stirng
* #param {String} delimter - The delimiter that seperates the words in the input string (default " ")
* #param {Boolean} capitalizeFirstWord - Wheater or not to capitalize the first word (default false)
*/
function toCamelCase(string, delimiter, capitalizeFirstWord) {
if(!delimiter) delimiter = ' ';
var pieces = string.split(delimiter);
string = '';
for (var i=0; i<pieces.length; i++) {
if(pieces[i].length == 0) continue;
string += pieces[i].charAt(0).toUpperCase() + pieces[i].slice(1);
}
if(!capitalizeFirstWord) string= string.charAt(0).toLowerCase()+string.slice(1);
return string;
}
// ===============
// CREDIT FOR JQUERY INCLUSION CODE: Brock Adams # https://stackoverflow.com/a/12751531/4561907
/**
* Check if we already have a local copy of jQuery, or if we need to fetch it from a 3rd-party server
*/
if (typeof GM_info !== "undefined") {
console.log("Running with local copy of jQuery!");
GM_main(jQuery);
}
else {
console.log ("fetching jQuery from some 3rd-party server.");
add_jQuery(GM_main, "1.9.0");
}
/**
* Add the jQuery into our page for our userscript to use
*/
function add_jQuery(callbackFn, jqVersion) {
var jqVersion = jqVersion || "1.9.0";
var D = document;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
var scriptNode = D.createElement ('script');
scriptNode.src = 'https://ajax.googleapis.com/ajax/libs/jquery/'
+ jqVersion
+ '/jquery.min.js'
;
scriptNode.addEventListener ("load", function () {
var scriptNode = D.createElement ("script");
scriptNode.textContent =
'var gm_jQuery = jQuery.noConflict (true);\n'
+ '(' + callbackFn.toString () + ')(gm_jQuery);'
;
targ.appendChild (scriptNode);
}, false);
targ.appendChild (scriptNode);
}
You can copy and paste that code as-is into a new Userscript and it will do the following:
Make Browser tabs/windows have useful titles (shows order numbers, customer names, vendor names etc - not just "Sales Order")
Change the header background to red (as an example)
Add a new heading to the top of all "Dashboard" pages that says "My New Dashboard Title" (as an example)

Displaying list of all items with the same lookup fields in Display Form of that Lookup field in SharePoint 2013

I have 2 lists which are Room and Equipment.
In the Equipment list there is a lookup Field to the Room list .
I want to display all related Equipment in Room simple tabular Display Form.
How should I achieve this?
A general solution would be as follow
Check you can work with the REST API in JavaScript like below. (in this step you can just make sure the URL is returning XML data you requested)
http://portal/_api/web/lists/getByTitle('Equipments')/items/?$select=Title,ID&$filter=Room eq 'room1'
create a new custom DisplayForm with SharePoint Designer and add the following jQuery Script to read and generate the previous fetched data at the end of
<script src="/_layouts/15/CDN/Js/jquery-1.11.1.min.js" type="text/javascript" > </script>
<script type="text/javascript" >
function LoadEquipments(roomValue) {
$.ajax({
url : _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Equipments')/items/" +
"?$select=Title,ID" +
"&$filter=Room eq '" + roomValue + "'",
type : "GET",
headers : {
"accept" : "application/json;odata=verbose",
},
success : function (data) {
var equipments = [];
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
if (equipments.indexOf(results[i].Title) < 0)
equipments.push(results[i].Title);
}
var ullist = $('<ul/>');
for (var i = 0; i < equipments.length; i++)
$('<li/>').val(equipments[i]).html(equipments[i]).appendTo(ullist);
ullist.appendTo('#divEquipements');
$("#divEquipements ul li").css("font-size", "16px").css("color", "salmon");
},
error : function (err) {
alert(JSON.stringify(err));
}
});
}
$(document).ready(function () {
var roomVal = $("#TitleValue").text();
LoadEquipments(roomVal);
});
for previous code to work as you might guess you would better add id for new td to enclose the new requirements(for example a new tr as the last row which contains aa div with id='divEquipements' ) data and also just add id='TitleValue' to the td containing the room title (usually the first row)
OK there are a lot of possibilities for achieving this. Some possible and good looking solution can be:
Overload the click of the market value in the list(can be done using JSLink) to open a Modal dialog page where all the equipments are listed(fetched using REST query)
Overload the click of the market value in the list(can be done using JSLink) and redirect to the same page but with filters to the same view.
If the number of markets are not many, views can also be created per market(Not so good, but will reduce coding effort)
If its something else you are looking for, please let know. Hope this helps!

XPages - Is it possible to make view column header fixed?

Just checking to see if there is a very simple way to make the view header fixed so that as you page down in the view in XPages, the header stays where it is. position=Fixed is not a property of xp:viewColumnHeader.
If you want to add the attribute of position to xp:viewColumnHeader you can use the attrs property to do that (works on 8.5.3). You code would look something like this:
<xp:viewColumnHeader ......>
<xp:this.attrs>
<xp:attr name="position" value="fixed"></xp:attr>
</xp:this.attrs>
</xp:viewColumnHeader>
But I don't think that alone would do the trick. Some time back I created a CSS snippet to make floating Banner, Title Bar and Place Bar in Application Layout control of Extension Library. You can get some ideas from that.
yes, it is possible, but requires some JavaScript coding.
I solved it for a customer recently using with the following code. The basic idea is to geht the width of the columns out of the first line of TDs, then apply this with to the THs ad set the THs to fixed afterwards.
You need to run this function after a partial update, too. Good luck.
var fixTableHeaders = function() {
var thead = dojo.query("thead")[0];
if (!thead) return;
thead.style.position = "static";
var THs = dojo.query('.xspDataTable th');
var firstTDs = dojo.query('.xspDataTable tr:first-child td');
var secondTDs = null;
if (firstTDs.length < 2) {
// categorized view, first line is a category with only one cell
// -> we need the second line
secondTDs = dojo.query('.xspDataTable tr:nth-child(2) td');
}
var w = 0;
for (var i = 0; i < THs.length; i++) {
w = dojo.coords(THs[i], true).w;
// console.log(i+" w="+w);
THs[i].style.width = (w)+"px";
if (firstTDs[i]) {
//if (secondTDs && secondTDs[i]) secondTDs[i].style.width = w+"px";
//else firstTDs[i].style.width = w+"px";
firstTDs[i].style.paddingTop = "3em";
}
}
thead.style.position = "fixed";
}
dojo.addOnLoad(fixTableHeaders);
I saw some jQuery code the other day that could make a Table Header fixed. Don't remember where it was but something that can help you should be out there.

Hide buttons on pagedown

I'm using pagedown on my website right now, and it's awesome so far, the only detail is
it's not a programming-oriented website, so I'd like to remove the 'code' button.
Is there a way I can do it? I tried using CSS to hide the buttons but the html has inline styles "left: xxx" which I can't change using CSS.
Thanks in advance!
If you open up Markdown.Editor.js, and scroll to approximately line 1360 (it varies depending upon which version you're using), you'll see an area with:
group1 = makeGroup(1);
buttons.bold = makeButton("wmd-bold-button", "Bold - Ctrl+B", "icon-bold", bindCommand("doBold"), group1);
buttons.italic = makeButton("wmd-italic-button", "Italic - Ctrl+I", "icon-italic", bindCommand("doItalic"), group1);
group2 = makeGroup(2);
buttons.link = makeButton("wmd-link-button", "Link - Ctrl+L", "icon-link", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, false);
}), group2);
buttons.quote = makeButton("wmd-quote-button", "Blockquote - Ctrl+Q", "icon-blockquote", bindCommand("doBlockquote"), group2);
buttons.code = makeButton("wmd-code-button", "Code Sample - Ctrl+K", "icon-code", bindCommand("doCode"), group2);
buttons.image = makeButton("wmd-image-button", "Image - Ctrl+G", "icon-picture", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, true);
}), group2);
So on and so forth. Simply quote out the buttons you don't want.
Alternatively, you can simply leave out the entire wmd-buttons div and only use the editor and preview components.
Search for doClick(buttons.code)in the code and comment it out
If you look at the makeButton function:
var makeButton = function (id, title, XShift, textOp) {
var button = document.createElement("li");
button.className = "wmd-button";
button.style.left = xPosition + "px";
xPosition += 25;
var buttonImage = document.createElement("span");
button.id = id + postfix;
button.appendChild(buttonImage);
button.title = title;
button.XShift = XShift;
if (textOp)
button.textOp = textOp;
setupButton(button, true); // <--- LOOK HERE
buttonRow.appendChild(button);
return button;
};
The true that is being passed in the call of the setupButton function is the isEnabled flag. What I did was just created another makeButton function and put it right under the first one. The only thing that I changed was that isEnabled flag to false. Then I changed to button.code = makeButton(...) to button.code = makeButton2(...).
buttons.code = makeButton2("wmd-code-button", getString("code"), "-80px", bindCommand("doCode"));

recognize multple lines on info.selectionText from Context Menu

My extension adds a context menu whenever a user selects some text on the page.
Then, using info.selectionText, I use the selected text on a function executed whenever the user selects one of the items from my context menu. (from http://code.google.com/chrome/extensions/contextMenus.html)
So far, all works ok.
Now, I got this cool request from one of the extension users, to execute that same function once per line of the selected text.
A user would select, for example, 3 lines of text, and my function would be called 3 times, once per line, with the corresponding line of text.
I haven't been able to split the info.selectionText so far, in order to recognize each line...
info.selectionText returns a single line of text, and could not find a way to split it.
Anyone knows if there's a way to do so? is there any "hidden" character to use for the split?
Thanks in advance... in case you're interested, here's the link to the extension
https://chrome.google.com/webstore/detail/aagminaekdpcfimcbhknlgjmpnnnmooo
Ok, as OnClickData's selectionText is only ever going to be text you'll never be able to do it using this approach.
What I would do then is inject a content script into each page and use something similar to the below example (as inspired by reading this SO post - get selected text's html in div)
You could still use the context menu OnClickData hook like you do now but when you receive it instead of reading selectionText you use the event notification to then trigger your context script to read the selection using x.Selector.getSelected() instead. That should give you what you want. The text stays selected in your extension after using the context menu so you should have no problem reading the selected text.
if (!window.x) {
x = {};
}
// https://stackoverflow.com/questions/5669448/get-selected-texts-html-in-div
x.Selector = {};
x.Selector.getSelected = function() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
$(document).ready(function() {
$(document).bind("mouseup", function() {
var mytext = x.Selector.getSelected();
alert(mytext);
console.log(mytext);
});
});​
http://jsfiddle.net/richhollis/vfBGJ/4/
See also: Chrome Extension: how to capture selected text and send to a web service

Resources