So i'm trying to create a "search box" using a "ModelessDialog", the main idea is as follow
1) User runs a macro that pops a ModelessDialog with the following fields: autocomplete, search button, and table (empty, only with headers)
2) The "Autocomplete" field is where the user can type an "ID" , (this part is already done)
3) The idea is, When the ID is selected, press the "Search" button to run some other macros in the background, then returns the data needed to populate the table and refresh the current "ModelessDialog"
The idea of doing it this way is that i dont want to open / render a whole page, as i want to be as fast and without having to "jump" between windows
Any advice? (im not adding any code since i don't have any trouble with the rest of the code /html, as the autocomplete auto populates, and the button runs the macro and returns some data)
Also im kind of new in javascript and html (I followed tutorials to make the other parts work :D )
The client-side JS code that resides in your modeless dialog can call server-side functions via google.script.run. The server functions can fetch the data required for filling the table, perform string interpolation and return an HTML string to the client.
Just set the callback function for google.script.run to modify the contents of your table received from the server.
Modeless dialog HTML
<div id="myTable">
<table>
<!-- table contents -->
</table>
</div>
JS script for the dialog:
google.script.run.withSuccessHandler(function(html){
var tableContainer = document.getElementById("myTable");
tableContainer.innerHTML = html;
}).getTableData();
More on client-client server communication here
More on templated html here
Related
I'm hard stuck with this one so any advice welcome!
Ive been trying to create a flow that goes to this website https://dlv.tnl-uk-uni-guide.gcpp.io/ and scrapes the data from each table in the Subject Areas drop down list. My knowledge of HTML is sketchy at best but from what I understand it's a dynamic html table that just refreshes with new data rather than going to a new url. I can extract the subject list as a variable and in my head i think i just need to add this to a UI selector action but despite numerous attempts i've got absolutely nowhere. Anyone got any ideas as to how i could fix this or work around?
Because it is not a conventional drop-down using the "Set drop-down list value on web page" doesn't work all that well.
You can use a bit of javascript and variables for this.
Hit F12 to show developer tools, you will see there is a list of hidden items with the class class="gug-select-items gug-select-hide" you will use this in the javascript.
Then add a 'Press button on web page' function and add the 'drop-down' element, which is a <div>
Then edit the element selector and change it to text editor.
then change the selector to make use of the nth-child(0) selector but use a variable for the index.
so it looks something like #gug-overall-ranking-select > div.gug-select-items > div:nth-child(%ddIdx%)
Use the "Run JavaScript function on web page" function to get the number of options available to the drop-down. (child elements)
The returned result is text, so convert it to a number that can be used in the loop.
function ExecuteScript() { /*your code here, return something (optionally); */
var firstDDlist = document.querySelector("#gug-overall-ranking-select > div.gug-select-items.gug-select-hide");
return firstDDlist.children.length;
}
In the loop each element will be pressed and cause the table to reload.
The table data extraction can then also be done in the loop, but that this code only shows the looping through the options.
The full flow 'code' (copy this and paste it in power automate).
WebAutomation.LaunchEdge.LaunchEdge Url: $'''https://dlv.tnl-uk-uni-guide.gcpp.io/?taxonomyId=36&/#gug-university-table''' WindowState: WebAutomation.BrowserWindowState.Normal ClearCache: False ClearCookies: False WaitForPageToLoadTimeout: 60 Timeout: 60 BrowserInstance=> Browser
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { /*your code here, return something (optionally); */
var firstDDlist = document.querySelector(\"#gug-overall-ranking-select > div.gug-select-items.gug-select-hide\");
return firstDDlist.children.length;
}''' Result=> numberOfItems
Text.ToNumber Text: numberOfItems Number=> itemCount
LOOP ddIdx FROM 1 TO itemCount STEP 1
WebAutomation.PressButton.PressButton BrowserInstance: Browser Control: appmask['Web Page \'h ... sity-table\'']['Div \'gug-select-selected\''] WaitForPageToLoadTimeout: 60
END
It should end up looking like this:
Flow running:
With using Power Automate Desktop (PAD), the goal is to be a low-code solution. Of course knowing HTML is a bonus and will help you on tricky webpages or problems, but not knowing much is alright usually. I'm not really comfortable going to that web page you shared but you could try the below option.
PAD has a built in function in the action pane:
'Browser automation' > 'Web data extraction' > 'Extract data from web page'
Try using that and when asked to add UI Element select the table/dropdown list to see what information you get back. If that doesn't work you might need to try out JavaScript or another method.
I am working on xamarin.forms. I have a content page which contains one webview which load 3rd party url(www.xyz.com) site and one button in shell.
On button click event I am trying to get user input data using
webview.eval(javascript: var data = document.getElementById('first-name').value;alert(data)).
It works fine but due to void return type I could not store data in local variable and I have a customrender(webviewrender) but don't know on shell button click event how can I get userinput data from webview
Please suggest me how do I achieve this functionality.I do not want XLab-Hybridwebview.
You'll probably need to have the JavaScript code call out to the external code when the result is available. You could then wrap that whole process in a TaskCompletionSource to make everything nice and easy to use.
In Google Sites, I am trying to add a short form consisting of a text box and a submit button as a cell in a row inside an html table. One copy of the form for each row in the table. I am trying to collect input data for each table row.
HTML File:
<html>
...
function showForm(){ // https://developers.google.com/apps-script/gui_builder#including
var app=UiApp.createApplication();
app.add(app.loadComponent("myGui"));
return app;
}
...
<table><tr><td><?=showForm()?></td></tr></table>
...
</html>
I then call the .html file from my doGet() function in my .gs file using HtmlService.createTemplateFromFile() method.
The table renders properly, except where I expect the form to appear, I instead get the text/string "UiApplication" instead of the text box + submit button combo.
Am I on the right track? Please help.
It's the wrong track.
You can't mix & match components from HtmlService and UiApp. GUI Builder is a packaged UiApp component.
Just stick with a FlexTable and fill the table cells with your builder component. But don't forget to set a prefix:
var flextab = app.createFlexTable();
for (row=0; ...)
for (col=0; ...)
flextab.setWidget(row, col, app.loadComponent("myGui", {"prefix": "row"+row+"col"+col});
BTW - you can only have one UiInstance in your web app. Call UiApp.createApplication() only once. If you need the UiInstance later on, you can always find it with UiApp.getActiveApplication().
I am in the process of porting a site I wrote from ASP.NET webforms to MVC3 and need some guidance as outlined below. I'm new to MVC3.
In my existing ASP.NET web forms project I have a simple page where the user enters a username, they then click a button which causes a postback, on postback there is some basic code that checks if the entered username exists in a user repository - if it does, a textbox containing the users e-mail is shown and the username textbox is made invisible. This happens with ajax and so when the username is entered, the textbox containing the e-mail along with an "Update" button is shown without a full page refresh.
I created a model such as:
public class ChangeEmailModel
{
[Required]
public string Username { get; set; }
[Required]
public string Email { get; set; }
}
Problem is that when the user first enters the page, they should only see a textbox prompting them to enter a username. Once the username is entered and an update button clicked, only then their e-mail is shown (retrieved from the database). Once the e-mail is shown, they can edit the e-mail and click update, which then will need to post to a controller action that saves the updated e-mail. I'm not yet fully used to thinking in the MVC way, so I'm not sure if I've started on the wrong foot with the model above...
Can someone give me some guidance on how this can be accomplished in MVC3 so I can give it a try?
I will start off by suggesting that you start using JQuery for your javascript/ajax functions. ASP.Net MVC3 supports JQuery nicely. I will ignore validation of the email for now as it will be much easier to get you started without it. A high level overview will be:
Add the JQuery script to your page
Add the JQuery vsdoc script to your page so you have some intellisense
Create a partial view to show the email and submit button
Create a controller action that performs the email lookup you mentioned
Create a div to accept the newly returned Email Update form
Use JQuery to override the submit on your username lookup to perform an ajax update instead (and populate the Email Update form div)
1. Add the JQuery script to your page
This should be pretty easy - just drag it from your scripts folder. I think mvc3 comes with jquery-1.5.1.js. Use the min (minified) version when you release to production.
2. Add the JQuery vsdoc script to your page so you have some intellisense
Not quite as easy here - you will want to use an if statement that always evaluates to false so the script is not actually included in your content. Having it on the page though, will cause VS to use it for intellisense. Put this near the top of your view:
#if (false) { <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> }
Hopefully you are using Razor. If not, start using it. It seemed a little foreign to me at first, but it requires much less markup.
3. Create a partial view to show the email and submit button
You could use the ViewBag to pass the Email address and UserName (for now as we are ignoring validation), but go ahead and make it strongly typed to your Model from above. Your view may look something like this:
#model ChangeEmailModel
#{using (Html.BeginForm("UpdateEmail", "Home", FormMethod.Post, new { id = "UpdateEmailForm" }))
{
<input type="hidden" name="userName" value="#Model.UserName" />
#Html.EditorFor(m => m.Email)
<button id="submitEmailUpdate" type="submit">Submit</button>
}
}
Note that we have given Ids to the form and the submit button. JQuery will find the form and button based on these ids. (if we need to, which we will if we want to "ajaxify" the action of updating the email. I did not go into that detail here, but it will be the same process to get that working as it is for the original username lookup)
4. Create a controller action that performs the email lookup you mentioned
I won't go into controllers much here (as you are asking about ajax type updates) but it might look like:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LookupEmail(string userName)
{
//connect to db and lookup email based on passed in username
//create a new instance of your model
var changeEmailModel = new ChangeEmailModel(.....)
//return a partial view
return PartialView("EmailUpdateForm", changeEmailModel);
}
Make sure to return a PartialView here rather than a View.
5. Create a div to accept the newly returned Email Update form
Make sure this div is not contained in your Username lookup form (as you want to hide it). We will be working with two separate forms. This div could be hidden if you prefer (but will start out empty anyway) I am calling it emailFormDiv
6. Use JQuery to override the submit on your username lookup to perform an ajax update instead
JQuery will allow you to attach functions to... well a lot of things, but we will be using it to override the submit button on your username lookup form. Assume that your original username lookup form with an id of "formUserNameLookup" that has a submit button with an id of "submitUserNameLookup". You would then create a script tag that looks something like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () { //The document.ready function will fire when the html document is... ready
$('#submitUserNameLookup').click(function (ev) { //fires when the submit button is clicked
ev.preventDefault(); //prevent the normal action of the button click
$.post($('#formUserNameLookup').attr('action'), //get the url from the form's action attribute. Could be hard coded for simplicity
$('#formUserNameLookup').serialize(), //serialize the data in the form
function (response, status) {
$('#emailFormDiv').html(response); //replace the html of your div with the response
$('#formUserNameLookup').hide(); //hide the original form
}, 'html'); //states that we are expecting html back from the post
});
});
</script>
The code above is attaching a function to be run when the submit button is clicked. It won't run, of course, until the button is actually clicked. Using JQuery/Javascript to attach functions to html elements, rather than embedding them directly inside the element is definitely preferred, and is referred to as unobtrusive javascript. If you continue with ajaxifying more of your page, you will want to look into JQuery's live and/or delegate functions. Note that there are plenty of things that can be changed once you start looking toward performance and/or best practices. The above should get you going though. I hope I haven't made too many assumptions on your current level of familiarity with ASP.Net MVC (like controllers and posting to controllers) but by all means, ask if you need further help.
So I have written a test which populates a form, saves (in the admin tool), and then publishes.
However, my form is being lost between the save click and the publish click. I would show what the form looks like in HTML, but its pretty huge (like 20-30 fields)
In psuedo code, filling out the form looks like this:
1) Fill in form using dropdowns
2) Hit the save button - saves all form data
3) Hit the publish button
When I pause the script to see what is happening within selenium, I see the form properly being populated. I then see the Save button properly being clicked. When I pause the screen before hitting publish, I see that the content I have saved after clicking the save button was lost or is in the wrong fields.
When I do this manually, it works correctly. I know selenium submits forms differently than the standard user, however, is there anything I can do on my end to make sure that form is being submitted properly?
What does the Save button actually do? Is it Javascript, or a simple ` button?
Are you using the C# interface to Selenium webdriver? You probably have code that looks something like this:
FillInForm();
selenium.click(By.CssSelector("input[value='Save']"));
selenium.click(By.CssSelector("input[value='Publish']"));
Have you tried inserting, between save and publish, lines like the following:
// further up: By saveButton = ...
// By formField = ...
selenium.click(saveButton);
var formField = selenium.FindElement(formField);
Assert.That(formField.GetAttribute("value")
.contains("The text you typed into the form")
);
The point here being to check that save really is doing what it says on the tin. Generally, when you ask the WebDriver to "click" on a button, it does do exactly (more or less) what the user does. Alternatively, you can inject some javascript to force the form to submit - but then you're explicitly not testing what the user actually does (but you might find it's closer to what you experience).