So I work with a very small business and I am working on shared contact database in Google Sheets. One of the things I would like to include is a simple button (I just used a drawing I made in Sheets) that says "Add New Contact" and when clicked it opens up a Google Form I created that will collect the contact info and store in it the Google Sheet.
My question is... What Google app script can I use to achieve that task? I'm very new to Google Apps script so I don't really know how to go about writing the code properly.
Thanks for your answers!
I just want a Simple Button!
The easiest way to create a button is to create a new html file in the script editor. When you do, it will open up a file and ask for a name. You add the name "AddNewContent" and look in the file and it will have this content.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
</body>
</html>
Add content so that it looks like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function addNewContent()
{
google.script.run.addNewContent();
}
</script>
</head>
<body>
<input id="btn0" type="button" value="Add New Contact" onClick="addNewContact();" />
</body>
</html>
Now go to the Code.gs file. When you start a new project the Code.gs file is added automatically and it contains the following:
function myFunction(){
}
Replace the code with this:
function addNewContent()
{
}
Now you have a button that's connected to the shell of a Google Apps Script Function. To display the button on a sidebar you can create another function in the Code.gs file like the one below:
function showSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('AddNewContent');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
And then to display the sidebar easily you can add the showSideBar function to a menu which will be created whenever you open your spreadsheet.
function onOpen()
{
SpreadsheetApp.getUi().createMenu('My New Menu').addItem('Display my Sidebar', 'showSideBar').addToUi();
}
So if you save all of those files and select the onOpen function in the code editor so that the menu looks like the image below and press the triangular button then it will run the onOpen function and you won't have to close and reopen the program to get it to run and the menu will magically appear on the spreadsheet. Now you can display your side bar and run your Google Apps Script function.
Unfortunately, the function doesn't do anything yet because I don't actually know what you want to do or have down. If you already created a Google Form then it has already linked itself to a spreadsheet and it's already collecting data. If you have created an HTML form of your own (which is doubtful) then you can display it as a dialog or deploy it as a web app.
So the real question is what have you done and where do you want to go from here. Unfortunately, writing Google Apps Script requires a fair knowledge of Javascript, HTML, a little CSS and in my case a bit of JQuery. It also involves a far amount of reading and research. And while you may not believe it now. Most of the questions I had about Google Apps Script are found in the documentation. Which is where I'd recommend that you go and read and then reread again and again until you know where to find everything you need to write your scripts. Most of the time when I need something I can find it in a Google Search and very often it will bring me right back to this site. But many of the answers to questions involve a fair amount of learning on my part.
The first time I tried to learn Google Apps Script was in 2009 and I finally gave up because I just got lost looking for documentation. But about 10 months ago I took another look and really liked what I saw in terms of how the documentation was organized so I jumped in again. A couple of months later I started visiting StackOverFlow.com and then I answered a few questions here and there and now about 8 months later I feel pretty good about many spreadsheet related tasks. I'm still weak in several areas and hanging around this site helps to remind me of all the things I could be learning.
Related
I am using jupyter notebook to develop a sort of proof of concept for a project of mine, right now I have the 2 pages loaded in the same iframe in one jupyter notebook cell. Right now I don't know what approach to take to solve the communication between these 2 pages in the same widget.
My 2 pages:
<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>
<button type="button" class="snd_Button">Click</button>
</body>
</html>
---------------
<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>
<h1 class ="Listener">I must react.</h1>
</body>
</html>
As you can see they are quite simple, what I wanted to know is what would be a good approach to communicate between them. I want to make so that when I click on the button of page 1, the text of page 2 dinamically changes.
I am planning on using javascript and searched solutions around it but I am not sure of how to continue, as I am new in JS programming and not familiar with its libraries (I've found some frameowrks like node.js or electron but I am not sure they should be applied here).
HTML doesn't support modifying the contents of another html page in this way. You'll likely need some server-side code to facilitate this.
In your case, I'd recommend using Websockets. There are plenty of youtube tutorials for similar functionality - search "Websockets Chat App" which should give you a good understanding of how to fire an event on one page, and then listen for that event on the second page.
Edit: You mentioned you have two pages rendering inside the same iframe - that doesn't sound right as iframes can only point to a single source.
In the case that you want to interact between an iframe and its HTML parent, maybe using cross-document messaging like this will work
Hey guys I write posts occasionally on blogger but today I stuck with one problem which is related to code snippet. I want to add html and JavaScript code in blogger but not find anything useful to do this task Then I used copy code from visual Studio then paste to blogger directly but sometimes code gets mangled and I want to deliver clear code to my reader.
I search a lot on google at last I find hilite website but this website is not working because it will not change special character like "<" And ">" To "<". I use hilite then copy the code and paste to my blogger post then function of this code will execute rather than showing code to posts So anybody here have idea how to do this task.
Thanks in advance!
First of all this is best rated question on internet because as you know there is no plugins and tools available on blogger to do this task but parallelly as we compare this thing to WordPress then there are tons of plugins are available to complete this task.
So Coming to main point how to add code snippets in blogger posts then your answer is just use third party syntax highlighting library from Highlightjs.
Highlightjs is a syntax highlightning library which use JavaScript and CSS code to high light code chunks in blogger. Also this platform supports 95 styles and 189 languages but this data is not static probably this data changes to new but from writing this post these are current data for sure if you want to know more about styles and languages then click on this .
Use this library to your layout html:—
<!-- below is used to highlight code in blogger-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
Now use pre tag in your blogger anywhere you want code snippet as depending upon your need.Use this below tag to blogger post where you want code box.
<pre><code class="html">
/* Paste your code here */
</code></pre>
If you want step wise solution with example then follow this blogger post. gforgeekspot
Hope this helps! Cheers
I have same problem back then, the solution is simple.
<script> /*<![CDATA[*/
Your javascript code
/*]]>*/ </script>
I am building a very simple 5 question multiple choice quiz "game" that just asks 5 simple questions displayed using HTML radio buttons, and a JavaScript function that validates if the user's selection is correct, and iterates a "score" which, when the submit button is clicked, displays "You got X out of X correct." Basically a .js 101 project.
I'm using a Content Management System called Blackbaud Internet Solutions (BBIS). It is proprietary to Blackbaud, and allows the user to build a fully functioning website that integrated with Blackbaud's CRM database. It allows you to build layout using HTML, however in the built-in HTML editor you do not declare any !DOCTYPE or <body> or <head> tags, you just start with your first or whatever, and the system will build out each page using it's native .aspx functionality.
BBIS does have a sophisticated stylesheet section that allows you to create and stack .css, however JavaScript is not handled in the same way.
A web developer that wants to include JavaScript on a page must insert that script by creating what BBIS calls an "Unformatted Text Part." (a "part" is like a widget, or block etc.) The Unformatted Text Part allows you to insert whatever you have between <script> ... and ...</script> in the:
<head>
<body>
at the end of the <body>
Locally on my workstation the .html, .css, and .js files all work together perfectly. And in BBIS, the HTML renders great, the CSS looks good, however, the JavaScript aspect just doesn't work at all. When you click the submit button, the screen flashes and the form's 5 radio buttons just reset to unselected.
Using Chrome's developer tools I can see in the DOM that the CMS (BBIS) brings a whole lot of unnecessary JavaScript to the party. I'm sure that on a page with more elements, these scripts have a perfectly logical function. But this page is literally a white background with nothing but a quiz in the middle of the page. My onSubmit button function has 3-4 other "onSubmit" scripts running on the same page, and I cannot help but think that this is the problem.
In the DOM, I can see that my JavaScript function has been inserted into the <head> tag, because that is where I configured it to load inside of the BBIS "unformatted text part". All the native BBIS "onSubmit scripts" appear in the <body>. Is there a way that I can insert some JavaScript into the <head> that will "take out" those <body> BBIS "onSubmit" scripts?
when you get a blank page maybe you leave the CMS page on submit?
How does your html form look like?
Another thing is, are you using jquery? Most CMS bring their own version of jquery. Try to use jquery in no conflict mode https://api.jquery.com/jquery.noconflict/
Edit the unformatted text part, and select the 'advanced options' button. You can choose to drop your part in the <head> from there.
First off, thanks to all of the great answers that I have seen that have helped me out with past projects.
Here is what I'm trying to do. I am putting together a home automation system and one of the things I would like to do is send a request to my web server and have it give me a status in real time.
99% of this, I have working. What I am needing (wanting) to do now is have a simple page check the status of a file on my webserver and have it change an image accordingly in real time.
The content of the file will be one of the following words ONLY:
On, Off, Open or Closed.
I can use a page refresh and my back-end ASP will do the work, but I am wanting something a little more elegant than page flicker on a refresh. So, I figured if there was some way to check the contents of the file in JavaScript, then I can just do something like the following using the contents of the file in the variable fileContents:
document.GetElementById('image').src = 'MyServer.address/GFX/' + fileContents + '.png'
This way when the file gets changed on my server, the image displayed on the page changes in (near) real time without flicker.
Please help me find the missing link in this scenario.
I would like to keep the resulting page as compact as possible. Here is a sample of the page that my ASP generates:
http://ssbbs.dyndns.org/panic/isy.asp?A=3D30711&T=S
It shows a green circle if the device I'm polling is on and a blue circle if the device is off.
The file I will read as an example is:
http://ssbbs.dyndns.org/panic/ISY/3D30711.txt
Use Javascript AJAX call to your ASP script. You could get the status and update the page with no refreshes at all. JQuery is particularly useful for things like this.
I figured a way to accomplish my end goal, thought not completely elegant, it's simple and small which fills my main requirements.
The flickering refreshing page is now held in a hidden iframe and then a repeating javascript updates the static page without flicker. The refreshing page no longer has the display image, but simply the source filename of the image updated by the javascript. IE: GFX/feedback/Off.png
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
BODY {background: #000000; color: #FFFFFF;}
#isy {visibility: hidden; height:0px;width:0px;}
</STYLE>
</HEAD>
<BODY onload="isyRead();">
<IMG ID="state" SRC="GFX\feedback\blank.png">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function isyRead() {
var isy = document.getElementById('isy');
if (isy.contentDocument) isy.contentDocument.location.replace("isyRead.asp?A=3C3FE71&T=S");
else isy.src = "isyRead.asp?A=3C3FE71&T=S";
setTimeout(function(){document.getElementById('state').src=isy.contentWindow.document.body.innerHTML}, 100);
setTimeout(isyRead, 4000 );
}
</SCRIPT>
<IFRAME SRC="about:blank" ID="isy"></IFRAME>
</BODY>
</HTML>
Hopefully someone else will find this helpful.
I am developing a website for dentist friend. So far it's looking good, I am using Wordpress along with the enfold theme.
One of the requested features for this website is to include the DemandForce appointment form, so customers would be able to schedule their appointments inside the new website.
I visited Demand force and found that the way to include their contact form is by:
Copying the following CSS file into the header <link type="text/css" rel="stylesheet" href="//www.demandforce.com/widget/css/widget.css" /> Which I did by modifying header.php
Adding the following script into the body; <script type="text/javascript">
d3cp_bid = 'private'; // Business ID in DemandforceD3
//d3cp_appt_source = 'My Website'; //optional. See Instructions.
//d3cp_appt_returnpage = 'your_page_url'; // Optional. See Instructions.
//d3cp_appt_postdata = 'false'; // Optional. See Instructions.
</script>
<script src="//www.demandforced3.com/b/burlingamesmile/scheduler.widget" type="text/javascript"></script>
Which I also did simply by created a raw text field and inputing it.
The result of this can be seen here. As you probably notice the form is not correctly formatted and I don't really understand why. I checked the source code, and both the CSS file and the script are where they should, so I don't quite get the displaying issues.
Since I couldn't figure it out this way, I tried another idea. The actual reservation form is hosted here. The good thing about that form is that is actually responsive. So I created another page with the following:
<iframe src="https://www.demandforce.com/b/burlingamesmile/schedule" width="1000" height="1500"></iframe>. How this looks can be observed here
This behaves ok. But the frame size doesn't adjust well to different screen sizes (smartphone, tablet, etc.) I have looked into this one, but it doesn't do the trick.
At this moment I am running out of ideas, so any comments/help is greatly appreciated, as always.
Thanks so much everyone.
Try adding this to your custom CSS section of the theme:
iframe, object, embed {
max-width: 100%;
}
Worked for me, making the content within the iframe responsive.