I try to preselect an option of a select in an embedded HTML form in Camunda Tasklist, but always the first option is preselected.
I followed Binding to a Process Variable:
Binding to a Process Variable
A select box can be bound to a process variable using the cam-variable-name directive:
<select cam-variable-name="foo" cam-variable-type="String">
<option>bar</option>
<option>zar</option>
</select>
Research
I read also CAM-3173:
select box doesn't show the correct option
If I set the value of variable by a select box on the start form, the next task form didn't show the option that has been choosen in the start form. It uses the same select box.
but I use Camunda 7.9 and the problem is fixed since version 7.2.3.
HTML
<form>
<select cam-variable-name="variable" cam-variable-type="String">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
Result
option1 is preselected. I checked the process variable before entering the user task and it contains option2.
What did I wrong? If the bug still exists, is there any work-around?
I found a work-around, see Camunda Reference:
Implementing Custom Fields
The following is a small usage example which combines some of the features explained so far. It uses custom JavaScript to implement a custom interaction with a form field which does not use any cam-variable-* directives.
It shows how custom scripting can be used for
declaring a variable to be fetched from the backend,
writing the variable’s value to a form field,
reading the value upon submit.
[...]
The above example uses jQuery for interacting with the HTML controls. If you use AngularJS, you can also populate the $scope in the variables-fetched callback and read the values from the $scope in the submit callback:
My changed HTML:
<form>
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
camForm.variableManager.fetchVariable('variable');
});
camForm.on('variables-fetched', function() {
$scope.variable = camForm.variableManager.variable('variable');
});
camForm.on('submit', function() {
camForm.variableManager.variableValue('variable', $scope.variable);
});
</script>
<select data-ng-model="variable">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
Related
I am trying to populate camunda html form select from json sent from my external service client.
Here is my sent json -
{myData=[{"id":1,"name":"This is one","value":"value11","localName":"this is local name 11"},{"id":2,"name":"This is Two","value":"value22","localName":"this is local name 22"}]}
Here is my html form -
<form>
<div>
<select
cam-variable-type="String"
cam-variable-name="selected_option"
ng-options="item as item.name for item in myData track by item.id"
ng-model="selected"
class="form-control">
</select>
</div>
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
// tell the form SDK to fetch the variable named 'myData'
camForm.variableManager.fetchVariable('myData');
});
camForm.on('variables-fetched', function() {
// work with the variable (bind it to the current AngularJS $scope)
$scope.myData = camForm.variableManager.variableValue('myData');
});
</script>
</form>
But it is coming up like below as undefined -
And i can see my json myData in next step and it's values -
Any help on how to populate my html form select from my json myData
Thanks
You should parse your process variable, because it has String type
$scope.myData = JSON.parse(camForm.variableManager.variableValue('myData'));
Without parsing your select ng-options ran through every letter in your string, that's why you had so many options in select instead of two. Also you didn't set correct id for ng-options. It must be like this:
ng-options="item.id as item.name for item in myData track by item.id"
I have a select input which, using livewire, calls a function whenever the selection changes. According to the documentation you can use $event.target.value to get to the selected value, however I want to send a different attribute value (myvalue) to my function.
<!-- this doesnt work -->
<select wire:onchange="myfunction($event.target.dataset.myvalue)">
<option value="1" data-myvalue="12345">
</select>
I got it working using Alpine.js but it seems odd that I need another framework to do so.
<!-- this does work, but requires alpine.js -->
<select x-data='{}' #change="$wire.call('myfunction',$el.options[$el.selectedIndex].dataset.myvalue)">
<option value="1" data-myvalue="12345">
</select>
Is there a pure livewire solution to this?
Your first code snippet is practically there already. The documentation you linked, in which $event is described, even shows why your code snippet doesn't work:
Your code uses wire:onchange, but Livewire checks for wire:change.
With your example though, you could also use wire:model="foo" and hook into the updatedFoo($newValue) function.
See the lifecycle hooks doc
I have a django register form .On the event of an invalid form submission, page is reloading.I need to stay on that same page if the data entered is invalid.
Is there any way to get this done without ajax ?
If not, how to do this with ajax
Well if you want to validate the data before submitting then you can just use plain javascript to validate the values and update your html displaying output as shown below.
Consider this below form.
<form>
<input id="target" type="text" value="">
</form>
<div id="other">
Trigger the handler
</div>
Use below script
<script>
$("#target").keyup(function () {
console.log(this.value);
});
</script>
In above script once you get the value you can write the logic to valid the same and update you result in html accordingly.
NOTE: Main point here is the event handler as you type anything it calls the function.
Obviously this may not be the best way to achieve this but consider this as demonstration.
I am creating a dropdown menu which is populated with cities. When a user selects a city from the dropdown, I would like to pass a city model to my "selectChange" action handler. The problem is that the model is always passed as a string:
<select class="{{b}}__select" onchange={{action "selectChange" value=target.value}}>
{{#each itinerary.cities as |city|}}
<option value={{city}}>
{{city.name}}
</option>
{{/each}}
</select>
I could pass the id and then fetch the model from that, but if I could just get this working it would be so much easier. Thanks!
Unless something changed a lot in Ember in the last versions, its select tag support it's pretty poorly.
I recommend you to take a look at some Ember select addon, like ember-power-select or emberx-select.
I think the first one is the most popular.
I'm trying use input with datalist in a lightning component and doesn't seem to work. I've looked around and can't seem to find anything that says i can't. So basically,
<input list="acctlist"/>
<datalist id="acctlist">
<option value="somevalue">
</datalist>
does not work. I want to have an input in a form that a user can type but also able to select from a list returned from the controller. Is there a workaround that would be as simple or is this the following route the best i got.
https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html
The list attribute of input tag is not compatible with lightning component.
When you deploy the components, the attribute is removed.
If you want to use input with datalist, you need to add the attribute in Renderer.js.
datalist.cmp
<input aura:id="acctlistInput" />
<datalist id="acctlist">
<option value="somevalue" />
</datalist>
datalistRenderer.js
afterRender : function(component, helper) {
var acctlistInputCmp = component.find("acctlistInput");
var acctlistInput = acctlistInputCmp.getElement();
acctlistInput.setAttribute("list", "acctlist");
return this.superAfterRender();
}