How to add custom buttons on UI using prompt? - user-interface

I have this problem. I was trying to build a spreasheet that, on open, would prompt a UI that allows the user to select between 3 custom buttons. A real scenerio would be this:
on open, it displays the message: "Hi! Which project do you wanna work on?" and, below this message, three buttons that say "Project 1", "Project 2" and "Project 3". Depending on the button pressed, It should modify the spreadsheet accordingly (for example, It would unify A1:A10 and write in it "Project 1" and so on).
How do I do this? Is this possible? Thanks:)

You can't do it to the Google Spreadsheet Ui because the button selections are fixed, OK, Cancel and such. But you can create a custom dialog.
In Code.gs I create an Installed onOpen
function myOnOpen(e) {
var html = HtmlService.createHtmlOutputFromFile("HTML_Simple");
SpreadsheetApp.getUi().showModalDialog(html,"Test");
}
Next I make a simple custom dialog with project buttons called HTML_Simple.html.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Which project do you want to work on?</p>
<input id="project1" type="button" value="Project 1" onclick="clickProject(this)">
<input id="project2" type="button" value="Project 2" onclick="clickProject(this)">
<input id="project3" type="button" value="Project 3" onclick="clickProject(this)">
<script>
function clickProject(button) {
try {
alert("You picked "+button.id);
google.script.host.close();
}
catch(err) {
alert(err);
}
}
</script>
</body>
</html>
Now you can test the button id and branch to do whatever you want.
Reference
HTML Service

Related

Form POST not working in web-based Task module

In my Web-based Task Module I display a button for the user to click if they accept certain conditions. The page has a form element with several hidden inputs to send a POST request to open a web page in a new browser window. When the user clicks the button on the page, we call a javascript function that calls the submit() method on the form and when the submit() completes calls microsoftTeams.tasks.submitTask() with the success results to close the Task Module.
<html>
<body>
<script>
microsoftTeams.initialize();
function buttonClick() {
// have the form submit to open the external document
document.getElementById("openNewDocument").submit();
// tell the bot the user didn't cancel
microsoftTeams.tasks.submitTask(
{"command":"openDocument", "success":"true"},
[ {my App ID} ]
);
}
</script>
<form
id="openNewDocument"
method="post"
action={url to document server}
target="_blank"
>
<input hidden="true" name="docContext" value={encryptedContext} />
<input hidden="true" name="activityId" value={activityId} />
<input hidden="true" name="participantId" value={participantId} />
<input hidden="true" name="tid" value={tid} />
</form>
<button label="open document" onClick=buttonClick()>
Open document
</button>
</body>
</html>
In the web browser the code works just fine. But in the Desktop Teams app (MacOS) the POST request is sent as a GET and the hidden inputs are ignored.
Is there a secret to getting the Form data send as a POST?
Form POST will not work in Task module. You need to call chaining in task module. Please go through this documentation.

Google reCAPTCHA v3: can't submit the form in data-callback

When I click the "submit" button, the form is not submitted. Why?
I got it straight from Google's sample code, all I added was one line:
document.getElementById("myform").submit();
The "thanks" message was shown.
If I click the "submit without validate" button, the form is submitted.
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('name').value);
document.getElementById("myform").submit();
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('name').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="/Second/Save" method="post" id="myform">
Name: (required) <input id="name" name="name">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="6LexWMMZAAAAAGpLECkk-pfZ-sYuQ9qDu7wiMJ3M"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
<button onclick="onSubmit();">Submit Without Validate</button>
</form>
<script>onload();</script>
</body>
</html>
The issue is that you have a button in the form with the id "submit". Any element in the form with a name or an id is reflected in a form attribute with that name. So if you have the form object will have an "elephants" attribute. In this case the submit button is accessible via form.submit, but this masks the submit() function.
If a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method.
MDN Web docs
Please check your site key, this error is mainly formed when your domain does not match your site key.
You can create your own google captcha key of your domain with your google account it's free of cost from the link given below
https://www.google.com/recaptcha/admin/create

Validating HTML form/web page element using VBScript

I have started to learn VBScript and I want to validate a HTML form / web page elements using VBScript .
Can anyone tell me if it is possible to refer an external HTML form/web page to the VBScript code and validate it's elements inside the script?
Like, I want to add a form reference or location (designed in HTML) in VBScript and validate its textbox, checkbox and submit it.
FYI, I can validate a HTML form simply by adding the VBScript part on the HTML code.
Example:
<html>
<head>
...
</head>
<body>
<script type="text/vbscript">
...
</SCRIPT>
<FORM NAME="Form1">
...
</FORM>
</body>
</html>
<HTML>
<HEAD><TITLE>Simple Validation</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Submit_OnClick
Dim TheForm
Set TheForm = Document.ValidForm
If IsNumeric(TheForm.Text1.Value) Then
If TheForm.Text1.Value < 1 Or TheForm.Text1.Value > 10 Then
MsgBox "Please enter a number between 1 and 10."
Else
MsgBox "Thank you."
End If
Else
MsgBox "Please enter a numeric value."
End If
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Simple Validation</H3><HR>
<FORM NAME="ValidForm">
Enter a value between 1 and 10:
<INPUT NAME="Text1" TYPE="TEXT" SIZE="2">
<INPUT NAME="Submit" TYPE="BUTTON" VALUE="Submit">
</FORM>
</BODY>
</HTML>
I want to validate a HTML form / web page elements using VBScript
This is very bad decision. Your solution will work only under Internet Explorer.
On client side strongly recomend to use JavaScript
On server sode of couse VBScript.

Kendo grouped-listview

I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>

text validation help

I`m newbie in jquery.
Got the following code:
`` `
How do I validate the textbox for user input required on clicking the button save and display error message next to the save button?
There appears to be a Validation Plug-In for jQuery. Have you looked at this already?
If not, it appears to do exactly what you want, and there is plenty of documentation right there to get started.
You can try something like
<html>
<head>
<script type="text/javascript">
function Test(txtCheck, lblCheck)
{
if (txtCheck.value == "")
lblCheck.innerHTML = "Textbox is empty";
else
lblCheck.innerHTML = "";
}
</script>
</head>
<body>
<input type="text" id="txtCheck" />
<input type="button" value="Save" onclick="Test(txtCheck, lblCheck);"/>
<label id="lblCheck"/>
</body>

Resources