Develop Reference

How can I save a visual change a user made to my web page?

So I'm making a web page where users can press buttons to add elements using appendChild but when they refresh the page it all goes away. Is there something I can do to save what the users add to the page so that when they refresh it it stays the same?
HTML:
<input type="text" id="input" placeholder="write anything here...">
<button id="submit" onclick="createEl()">Submit</button>
<div class="text-div" id="text-div"></div>
CSS:
#input {
width: 500px;
height: 50px;
padding-left: 5px;
}
#submit {
height: 55px;
}
JAVASCRIPT:
var txtDiv = document.getElementById("text-div")
var inputField = document.getElementById("input")
function createEl() {
if (inputField.value !== "") {
var p = document.createElement("p")
var pNode = document.createTextNode(inputField.value)
p.appendChild(pNode)
txtDiv.appendChild(p)
}
}

In the absence of a database, you could try storing their progress within window.localStorage. On page load, you would need to run a function that checks for this item; if present, the function would then repopulate all of their information. After each submission, you would also need to update local storage so that their progress stays current.

Well, as people said earlier the if you want to load your data in all browsers regardless of where did those data came from, you should set up a database, based on your need and specification. Otherwise, you can get used to existing stuff in browsers such as localStorage. So you need to create a property in it, then on each page reload check whether there are data saved there or not with onload event.
So your final code should be something like this:
var txtDiv = document.getElementById("text-div")
var inputField = document.getElementById("input")
var items = [];
function createItem(item) {
var p = document.createElement("p")
var pNode = document.createTextNode(item)
p.appendChild(pNode)
txtDiv.appendChild(p)
}
window.onload = function() {
if (window.localStorage.getItem("items") !== null) {
items = JSON.parse(window.localStorage.getItem("items"))
var itemsLength = items.length
for (var i = 0; i < itemsLength; i++) {
createItem(items[i])
}
}
}
function createEl() {
if (inputField.value !== "") {
createItem(inputField.value)
items.push(inputField.value)
window.localStorage.setItem("items", JSON.stringify(items))
}
}

You will need to use some method of persistent storage. If you don't care about saving the changes forever, then you can save user changes in localStorage. If you need to make sure the changes will always be available, then you'll need to create a database and handle saving and loading data from an API that connects to it.
Here's an example of how to do this using localStorage:
var txtDiv = document.getElementById("text-div")
var inputField = document.getElementById("input")
const getSaved = () => JSON.parse(localStorage.getItem("saved"));
function saveEl(val) {
const saved = getSaved();
let newInputArr = saved ? [...saved, val] : [val];
localStorage.setItem("saved", JSON.stringify(newInputArr));
}
function createEl(val) {
var p = document.createElement("p")
var pNode = document.createTextNode(val)
p.appendChild(pNode)
txtDiv.appendChild(p)
}
function saveAndCreate() {
if((inputField.value !== "")) {
saveEl(inputField.value);
createEl(inputField.value);
}
}
const saved = getSaved();
if(saved && saved.length) {
saved.forEach((val) => {
createEl(val)
})
}

Issue loading a page with Realtime Database contents

I recently set up a small web page using Firebase; say:
https://myapp.firebaseapp.com/.
It uses a Realtime Database to provide contents to the visitor.
It usually works, but it happens that the page does not load as it should. Specially after being let for a while without being touched.
To load the page, it is necessary to click the refresh button.
Why is that happening and how could I avoid it?
For reference, here the relevant code of the index.html page.
<table id='ItemTableList'></table>
<script>
const dbReference = firebase.database().ref('ItemList');
let output = document.getElementById('ItemTableList');
output.cellSpacing = 17;
dbReference.on('value', function(listItem) {
output.innerHTML = ''; // We clean the list.
listItem.forEach(function(tutoItem) {
let itemLnk = document.createElement('a'),
itemR = document.createElement('tr'),
itemD = document.createElement('td');
const itemVal = tutoItem.val(),
itemText = document.createTextNode(itemVal.name),
lineBrk = document.createElement('br');
itemLnk.appendChild(itemText);
itemLnk.href = itemVal.url;
itemD.setAttribute('style','text-align:center');
itemD.style.backgroundColor = '#FEFEDB';
itemD.appendChild(itemLnk);
itemR.appendChild(itemD);
output.appendChild(itemR);
});
});
</script>

Gmail Apps script function to display Browser MsgBox from GMail Addon

I have the following working code which validates a list of recipients based on specific conditions. However, I'm looking to replace the resulting "Logger.log" actions with "Browser.msgbox" actions, and for some reason, GMail App Addons are not allowing me to do so:
function validateRecipients(e) {
var toEmails = e.draftMetadata.toRecipients, ccEmails = e.draftMetadata.ccRecipients, bccEmails = e.draftMetadata.bccRecipients, domains = [], uniqueDomains = [];
var allEmails = toEmails.concat(ccEmails, bccEmails);
for (var i = 0; i < allEmails.length; i++) {
domains[i] = allEmails[i].split("#").pop().split(".")[0];
}
uniqueDomains = domains.filter(listUnique);
if(uniqueDomains.length <= 2 && uniqueDomains.indexOf("verasafe") != -1) {
Logger.log("This Message is Good to Go");
}
else if(uniqueDomains.length == 0) {
Logger.log("This Message has no recipients");
}
else {
Logger.log("Please Validate Receipients of this Message and Try again");
}
}

Partial answer
Browser.msg can't be used on Gmail Add-ons, because, from https://developers.google.com/apps-script/reference/base/browser
This class provides access to dialog boxes specific to Google Sheets.

You cannot use Browser.msg or any of the UI classes with Gmail.
However, there is a new feature called Card Service that is meant to be used for the creation of UI for Gmail Addons.
Hope this helps!

The closest I could currently find is notification which shows a quick message at the bottom of the card (in Google's Material design it's called a snackbar
https://developers.google.com/apps-script/reference/card-service/notification
Other than that you need to replace the card with a new one.
function _navigateToCard(card: GoogleAppsScript.Card_Service.Card, replace: boolean)
{
var nav = CardService.newNavigation();
replace ? nav.updateCard(card) : nav.pushCard(card)
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}

Creating whole new view based on current user's group sharepoint 2013

I am trying to generate a view based on the current user's group name. Group Name I am gathering from the custom list.
My question is how to apply the gathered group name to 'Group Name' column as a view parameter.
The only solution I figured:
I have created a view with a parameter.
I have added an HTML Form Web Part into the same page and connected it to the list view (sending the value to the parameter via web part connection). Then with a window.onload function I gather the current user's group name and pass this value via Form Postback function. But since the Postback function triggers full page reload, it falls into the endless loop of form submission > page reload.
Another way I have tried is attaching a click event listener to the BY MY GROUPS tab and it works perfectly, but the only disadvantage is that the page reloads each time user clicks on this tab, which I would like to avoid.
So the solution that I need is a way to post the form without a page reload.
Another option suggested here is to use CSR (client side rendering), but that has its own problems:
This code does not work as it is supposed to. In the console it shows me correct items, but the view appears untouchable.
Even if it worked, the other column values are still viewable in the column filter, as in this screenshot:
So, it seems that CSR just hides items from the view (and they are still available). In other words its behavior is different from, for example, a CAML query.
Or am I getting it wrong and there's something wrong with my code?
Below you can find my CSR code:
<script type='text/javascript'>
(function() {
function listPreRender(renderCtx) {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
var currUserID = _spPageContextInfo.userId;
var cx = new SP.ClientContext('/sites/support');
var list = cx.get_web().get_lists().getByTitle('Group Members');
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
cx.load(items, 'Include(_x006e_x50,DepID)');
cx.executeQueryAsync(
function() {
var i = items.get_count();
while (i--) {
var item = items.getItemAtIndex(i);
var userID = item.get_item('_x006e_x50').get_lookupId();
var group = item.get_item('DepID').get_lookupValue();
if (currUserID === userID) {
var rows = renderCtx.ListData.Row;
var customView = [];
var i = rows.length;
while (i--) {
var show = rows[i]['Group_x0020_Name'] === group;
if (show) {
customView.push(rows[i]);
}
}
renderCtx.ListData.Row = customView;
renderCtx.ListData.LastRow = customView.length;
console.log(JSON.stringify(renderCtx.ListData.Row));
break;
}
}
},
function() {
alert('Something went wrong. Please contact developer')
}
);
});
}
function registerListRenderer() {
var context = {};
context.Templates = {};
context.OnPreRender = listPreRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();
</script>

Execute javascript only in specific url

I have an external JS file with inside this code:
var mobile_number_param = document.getElementById('mobile_number_param');
mobile_number_param.maxLength = 9;
mobile_number_param.readOnly = true;
var email = document.getElementById('email');
email.readOnly = true;
var user_notes = document.getElementById('user_notes');
user_notes.maxLength = 90;
var admin_notes = document.getElementById('admin_notes');
admin_notes.maxLength = 90;
Now my goal is to apply the code related to "mobile_number_param" but ONLY when I'm on the "reserve.php" page otherwise I'm not allowed to modify my Mobile Phone number in other area such my profile page.
Somebody told me this:
You can recognize the current url by checking window.location.href and e.g. searching for reserve.php to know you're on the reservation page..then apply your code.
Unfortunately I'm not a coder and don't have any idea how to do.
Any suggestions ? Thank for your time...

if (window.location.href.indexOf('reserve.php') != -1) {
// do stuff for reserve.php page here
}

Just add the following function in your external JS File:
function myFunction(pagename) {
var pageurl = window.location.href;
var pg = pageurl.split("/"); /*SPLITS THE URL ACCORDING TO DELIMINATOR "/". Eg x/y/z/reserve.php pg[0]=x,..pg[3]=reserve.php*/
var pgname = (pg[pg.length - 1]);
if (pagename == pgname) /*check whether the current page is reserve.php or not*/
{
return true;
}
return false;
}
Calling the Function:
if (myFunction("reserve.php")) {
/*Yes reserve.php page*/
} else {
/*Not reserve.php page*/
}

Server sided you could read the HTTP referer field.
If it contains reserve.php include the one js else an other js.
If you prefer to use only one js you could wrap the fucionality into a function.
called from reserve.php with parameter 1, from other pages parameter 0
or else.