Client Browser access from Canvas Section

[JamesPat]

I am trying to learn by actually writing something...That's a "head-banger", but the quickest way for me to learn. I am currently in Canvas Sections and I think(?) I understand when and where to use them. They present a free-form method of creating a UI and will work in the Web if javascript is used as the scripting language. They seem the most like VFP forms. Right so far? To this end, Lianja adds a certain level of abstraction above javascript by allowing us to use more VFP-like coding (i.e. referencing within the section by name only and not requiring the getElementById() method, creating the HTML for the page, and so on...). Please correct me if I misunderstand something.

I am now pushing ahead by trying to access the Client Browser, as you would in javascript. Is this even possible from a Canvas Section? I am looking at running an execCommand() and haven't been able to deduce how or if it can be run (well, I can tell you how NOT to run it!). Can I access the Document object from Canvas? Is this where you need to leave Canvas and go to Webview (not worked on one yet, just heard discussions about it here)?

I have already seen there are multiple ways to achieve the same end in Lianja and I am trying to get a handle on the most appropriate for a situation. As usual, thanks in advance for your help.

- James

[HankFay]

What are you trying to accomplish with your execCommand?

The DOM is available from the window var, as expected. But remember jQuery and Bootstrap are also available, as well as CSS.

Lib_ ...js file for the delegates has the window var available. Create an init delegate for your canvas section, and you will be able to play with it.

The real question is, what are you trying to do? I'm very curious.

Hank

[JamesPat]

I was not trying to be coy, I just didn't want to devolve into a conversation about the clipboard. I was experimenting with execCommand('copy') to see if I could get a textbox contents onto the clipboard. I have to admit that I haven't tried this in a simple web page before, just now have a need. Every time I need to do some web work it has been long enough that some things have changed and the ability to copy to the clipboard from JS is only recently available from all major browsers (well, it's new to me).

It appears you set focus to the textbox, which I have found as .focus or .select() in different examples. May even need a selectRange, again going to have to "wade" through the information on this one. Then call execCommand('copy'). Seems so easy...

Wondering about the app? I am helping with the changeover to a new ERP system and I am building "helper" apps to aid in the use of this system. No history will be ported to the new system, except for open items, inventory, vendors, customers. This is to allow the new system to build on fresh, valid data and not on data beginning in 1992 in Foxpro 2.0. Don't get me wrong, there is nothing wrong with the old data, the new ERP system is not capable of utilizing it in a constructive manner. Don't get me started on the sorry state of modern ERP software, from it's busy, complicated, green-screen approach to UI (Hello 1990!), to the vendor's conclusions that it should take 200 hours to properly train a user. Remember, computers make our lives better! There is a need to generate unique part numbers for entry of special orders and one of the helper apps uses guid() as a basis of generating a 10-character pseudo unique string. Pseudo because it is not guaranteed to be unique, but will only repeat 2-3 times in several billion runs on the same computer - close enough. Why not let the user make up a random string? Early training proved this to be unwieldy as we saw strings like "harley23", "73Camaro", "Go BAMA", and several I can't type in a public forum. Wouldn't be a problem, but they appear on customer documents and tended to make the company look a bit unprofessional. The Desktop works like a charm, a couple lines of code, press a button, and the string is on the clipboard. Now on the web version...

The next "helper" will be a Search app against the VFP data so that history info is available to the users. VFP data will be static after changeover and ported into Lianja SQL. Currently in VFP, this search involves several SQL selects, unions, cursor combining, and other manipulations for performance reasons. Performance? Single, complex Select in VFP took 48 seconds and the procedure took 235 ms. I do intend to try a single Select in Lianja, I really want to pass parameters and use the Lianja framework as intended. Expect more questions soon!

- James

[HankFay]

Hi James,

With a little research:

In a canvas section with a textbox fldcontact populated with the contactname from company in Southwind, in your JS (no need to select the text in the control):

fldcontact.select();
document.execCommand("copy")';

Now go somewhere you can paste it and do a ctrl+v

Lianja: the solution to what ails you. <s>

Hank

[JamesPat]

Hi,

My code almost exactly, thats the confirmation I was looking for. Still, doesn't work. Of course this is on a Mac, so I will fire up Lianja in Windows and try there. Tried Safari and Chrome. Might be a security problem. Will report back as soon as I find something. Thanks!

- James

[HankFay]

Hi James,

it works on Windows.

Here's a solution for Mac: https://stackoverflow.com/questions/...oard-on-safari

And supposedly works in Safari 10 or later: https://developer.apple.com/library/...fari_10_0.html

Hank

[JamesPat]

Hi,

OK tested in Mac and Windows and I am still missing a reference or something. Here is the entire delegate:

  
        //Call get_short_id(10) to get a 10 character pseudo guid
	var m_guid = Lianja.evaluate("procs::get_short_id(10)");

        txtpartnumber.text = m_guid;  // assign to the textbox

	if (Lianja.isDevMode()) {     // Determine if in the Desktop or Web

	   Lianja.clipBoard(m_guid);  // Lianja.clipBoard ONLY works in Desktop

	 } else {                     // In a Browser, try some Javascript...

                txtpartnumber.select();

		var copysuccess // var to check whether execCommand successfully executed
		try{
			copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard
			messagebox("Copy Worked")
			} catch(e){
			copysuccess = false
			messagebox("Copy Failed")
			}
		}

You can tell this is test code, only a few lines if you discount the messageboxes and try/catch. Tested Mac on Safari (always the toughest) and Chrome, Windows on Firefox. No browser errors... Browser security requires an action from the user before allowing clipboard access. I thought calling a procedure might break this, so I added a "copy" button and since this delegate had already populated the textbox there was something to copy. The "copy" button delegate code is :

txtpartnumber.select();
document.execCommand("copy");

No error correction, comments. Still, not working. I am missing a reference or something? Ideas?

Thanks - James

[yvonne.milne]

Hi James,

txtpartnumber.select() isn't a valid Lianja textbox method. You can use document.getElementById(<objectid>).select().

First get the document id for the object:

var cobjectid = txtpartnumber._objectid;

Then use that reference for the select():

document.getElementById(cobjectid).select();

Then call the copy. You should see the text being highlighted as it is selected.

Regards,

Yvonne

[yvonne.milne]

and unless you specifically want a 10 character ID, you can use the guid() function directly:

var m_guid = guid();

[HankFay]

Hi Yvonne,

In canvasquerypage I added a commandbutton. I also renamed field1 to fldcontact. I then ran the app in Web App View, queried to get a record ("Start With", "EU" does the trick).

In the commandbutton click delegate I had the following code, which works:

////////////////////////////////////////////////////////////////// Event delegate for 'click' event
function page1_section1_btnselect_click()
{
fldcontact._element.select();

};

I tested in live, also, with the same result (even without getting data into the field). I gather ._element is the reference to the html object.


Hank