I am trying to register a new attribute as shown in the webinar at Youtube.
I am using almost the exact example from the webinar. My HTML:
<button class="btn btn-primary" data-ub-component="Button" data-ub-version="%package_version%" style="color: rgb(255, 255, 255); width: 100%;" data-f-on-click="step(1)" data-f-toggle="Time">Advance By One Year</button>
My javascript:
Flow.dom.attributes.register('toggle', function (value) {(value>=2020)?this.CSS('display','none'):this.CSS('display',''block)});
When debugging via Chrome console, I noticed that "value" is always zero!
Related
Using bootstrap 5, specifically going over this: https://getbootstrap.com/docs/5.3/forms/form-control/
I am trying to create a simple example text area with some text in it pre-populated, so that I can add a button that will copy the propulated text into clipboard.
Method 1-
Sample code from Bootstrap looks like this:
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
If I use something like 'placeholder' the text box gets prepopulated but I can't "grab" that text neither manually or via a js script. The placeholder my understaning is just a hint of what is to be filled out in the box.
Method 2-
If I used for example a regular HTML textarea element I can do this, no problem, with something like this:
<textarea id="textbox" rows="3" cols="80">{{prepopulated_date_variable}}</textarea><br />
<button type="button" class="btn btn-primary"onclick="copyTextBoxData()">Copy Copy Data</button>
So if I use a regular "textbox" like in Method 2, it does not leverage the cool look and resizing capabilities of bootstrap, hence why I am trying to get Method 1- or similar to work.
Any queues? tips? maybe another element?
I am new to this all, but the concept is that I am passing from a another piece of code the prepopulated data for user to see (leveraging Jinja template with Python if that makes any difference) and then idea is that button allows my user to copy to mem clipboard what is in the text box, so that they can past in something else.
Appreciate any support or ideas.
I am using Method 2- described in problem statement. What I am expecting is that I can use Method 1 or alternative with bootstrap component to leverabe the styling and features of bootstrap.
You can use JavaScript to set the value of the form inputs when the page loads.
This code creates a form with two inputs (email and password) and a button that, when clicked, copies the values of the inputs to the clipboard. The copyToClipboard function uses the document.getElementById method to get the values of the inputs, concatenates them into a string, creates a temporary input element, sets its value to the string, selects it, and then executes the document.execCommand("copy") command to copy the value to the clipboard. Finally, it removes the temporary input element and alerts the user that the data has been copied.
function copyToClipboard() {
var email = document.getElementById("exampleInputEmail1").value;
var password = document.getElementById("exampleInputPassword1").value;
var data = "Email: " + email + "\nPassword: " + password;
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = data;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("Copied to clipboard: " + data);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<form>
<div class="form-group">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value="example#email.com">
</div>
<div class="form-group">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" value="password123">
</div>
<button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
</form>
I've spent about a week or so on this, and there's very little documentation online so I figured I'd come on here to see if anyone could potentially help out. So the top level summary is that I'm trying to use an external library (neovis.js) to visualize a neo4j graph database in a Salesforce Lightning web component. I've already explored d3.js (which is compatible with Salesforces locker service) and a few other visualization libraries, but neovis.js would be the most viable option for my use case. I've made some slight modifications shown in the code below to avoid using Document.getElementById in the neovis.js library to select the element and append the canvas to the page.
However, once the canvas is drawn to the page, none of the canvas elements (nodes and edges) are shown on the screen. Here's the weird part though, I can still hover over where the nodes should be on the canvas, and the popup which displays specific information for each node appears on screen with the correct information for each node. I am not super familiar with how the canvas element works, but it seems to me as if some css property is not being applied because of Salesforce's locker service, which causes to elements to be rendered invisibly.
I've gone through a good chunk of the neovis.js library (which is just a library built on top of vis.js), and I've looked for places where perhaps styles aren't being applied to the canvas element; however up to now I've had no luck.
Here's the code I've used so far:
index.html
<template>
<lightning-card title="Neovis" icon-name="custom:custom19">
<div class="slds-m-around_medium">
<div id="neovisContainerViz" class="neoVizClass" lwc:dom="manual" style="height: 700px; width: 400px;">
</div>
</div>
</lightning-card>
</template>
index.js
drawNeovis() {
const config = {
container_id: "",
server_url: "bolt://neo4j.het.io:7687", //This is a publicly available neo4j database that I'm using for testing purposes.
server_user: "",
server_password: "",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (node:Disease {name: 'lung cancer'}) RETURN node"
}
const parent = this.template.querySelector('div.neoVizClass');
const container = document.createElement('DIV');
container.className = 'neoViz';
parent.appendChild(container);
const viz = new NeoVis.default(config);
viz._container = container; //This is a property inside of the NeoVis library. This property is normally set by using the document.getElementById method, however I've replaced it with my predefined container to get around the Salesforce Locker Service.
viz.render();
}
Here is exactly what is rendered onto the Salesforce App page:
<div class="slds-card__body">
<slot>
<div class="slds-m-around_medium">
<div id="neovisContainerViz-67" class="neoVizClass" style="height: 700px; width: 400px;">
<div class="neovis">
<div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
<canvas width="200" height="200" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
</canvas>
<div class="vis-tooltip" style="left: 5px; top: 5px; visibility: hidden;">
<strong>
license:
</strong>
CC BY 3.0
<br>
<strong>identifier:</strong>
DOID:1324
<br>
<strong>name:</strong>
lung cancer
<br>
<strong>source:</strong>
Disease Ontology
<br>
<strong>url:</strong>
http://purl.obolibrary.org/obo/DOID_1324
<br>
</div>
</div>
</div>
</div>
</div>
</slot>
</div>
The canvas and the tooltip are appended to the DOM, AND the tooltip dynamically updates when I hover over where the canvas elements should be displayed. However none of the nodes or edges are visible on the screen.
All in all, I am not very familiar with how the canvas element actually functions, and am hoping that someone can give me some tips on how to trouble shoot this issue and get the elements on the canvas to display.
Thank you all!
I was able to finally figure this out incase anyone else is running into similar issues. I wouldn't say this is the preferred answer, but it works (for now). Basically I injected an iframe into Salesforce, and inside of the iframe I injected the neovis.js library and generated the graph, works perfectly now.
In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437
I have a view that isn't working for some of our customers, but it does work for others. Eventally (I believe) I have tracked this down to an issue with ie8 over more modern browsers.
This project has to use IE, and for legacy reasons, this customer has to use ie 8, so please don't turn this into a browser discussion.
The problem line is;
#Html.HiddenFor(x => x.CustomerPresent, new { #name = "CustomerPresent" })
The javascript that toggles the value works (as checked by inspection of the html).
But when the form is submitted, I always get a value of false back for the hidden field, even if it has been set to true on the page.
I then cut out the html helper, and replaced it with;
<input type="hidden" name="CustomerPresent" id="CustomerPresent" value=#Model.CustomerPresent />
Again though, when the form is posted back, the CustomerPresent field is false, even if it was set to true on the page.
This is only an issue for the one customer, but they are a big one, so how do I create a work round to fix this.
[Update]
Using Dev Tools, I have seen that the request does not contain &CustomerPresent= for ie8, but it is present for ie11.
[update] Added js as requested
function signNow(customerPresent) {
document.getElementById('CustomerPresent').value = customerPresent;
}
and the button calls are;
<button id="signButtonNotPresent" onclick="signNow('false');return false;" class="btn btn-large btn-primary pull-right" style="margin-bottom:10px;" type="button">Customer Not Present</button>
<button id="signButton" onclick="signNow('true');return false;" class="btn btn-large btn-primary pull-right" type="button">Customer Is Present</button>
I am testing a grails application and have the tests run by Hudson. The tests are passing 100% of the time when run on local machine.
Database Is always reset when the tests initialize.
I have problem setting the value for a dynamic form. In my .gsp I have the following :
<g:xEditableRefData owner="${license}" field="isPublic" config='YN'/>
This is generating an ‘Edit’ link,. When clicked a dropdown appears which allows the user to select between Yes or No. (screenshots at the end of mail):
Following is the generated code:
<span data-url="/demo/ajax/genericSetRel"
data-source="/demo/ajax/sel2RefdataSearch/YN?format=json&oid=License%3A1"
data-name="isPublic" data-type="select" data-pk="License:1"
class="xEditableManyToOne editable editable-click editable-empty" id="License:1:isPublic">Edit
</span>
And when clicked:
<span class="editable-inline editable-container">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group">
<div>
<div class="editable-input">
<select class="input-medium">
<option value="RefdataValue:1">Yes</option>
<option value="RefdataValue:2">No</option>
</select>
</div>
<div class="editable-buttons">
<button class="btn btn-primary editable-submit" type="submit">
<i class="icon-ok icon-white"></i>
</button>
<button class="btn editable-cancel" type="button">
<i class="icon-remove"></i>
</button>
</div>
</div>
<div class="editable-error-block help-block" style="display: none;"></div>
</div>
</form>
</div>
</span>
I have the following method in my Page class for setting the value of the edit/dropdown:
editIsPublic { option ->
$("span", 'data-name': "isPublic").click()
try {
waitFor { $("form.editableform") }
} catch (geb.waiting.WaitTimeoutException e) {
throw new RequiredPageContentNotPresent()
}
$("select.input-medium").value(option)
$("button.editable-submit").click()
}
This is always successful on my local machine, but when run headless on Hudson I get about 80% failure. When it fails the tests don’t stop, but the dropdown has wrong value, and no exceptions are thrown. I have also considered passing arrow keys instead of set the value but this is not a good option for other reasons. Any ideas why the above code is not working on Hudson? Is there any other way I could set the value?
UPDATE
Adding a lot of waitFor statements seems to have fixed the issue for now. I have defined the following closure, and I am using it on everything that is interactive.
waitElement {run ->
try{
waitFor{run()}
} catch (geb.waiting.WaitTimeoutException e) {
throw new RequiredPageContentNotPresent()
}
}
I didn't spend a lot of time trying to get headless firefox working, because I read of many issues such as these. I decided to give PhantomJS a try instead and it has been working exactly as expected so far.
To set up the PhantomJSDriver you need to:
Download/install PhantomJS per their docs
Add the PhantomJSDriver to your test dependencies 'com.github.detro.ghostdriver:phantomjsdriver:1.1.0'
Set a system property that points to the PhantomJS binary
Set PhantomJSDriver in the GebConfig file
Here's a simple example of what I put in my GebConfig:
System.setProperty("phantomjs.binary.path", "path/to/phantomjs/binary")
driver = {
def pjsDriver = new PhantomJSDriver()
// set window size manually because the default size is very small
pjsDriver.manage().window().size = new Dimension(1680, 1050)
pjsDriver
}
Sorry that doesn't directly answer the question of "why" some tests are having issues, but hopefully that will resolve it!