I have an onyx.Picker which before selection displays a "Click to Select" button prompting the user for action. As is the expected behavior, once the user picks an option, they can not revert back to the "Click to Select" display. However, I need to be able to programmatically reset the form, in which case, the picker should once again revert to it's original state.
I have figured out that I can remove the picked option by calling this.$.PickerName.setSelected(null) However, the UI does not revert back to the "Click to Select" display as would be expected. How can I reset the picker completely?
Fiddle : http://jsfiddle.net/trex005/2amLu1r4/
As far as i am aware, setSelected() on the picker expects you to pass it a reference to the control (picker's clientControls) which you want to set dynamically ,so passing null will do nothing. Once an item is selected, the list of items closes, but the item stays selected and the pickerButton displays the choice that was made. So, all you have to do is this. this.$.pickerButton.setContent('Click to Select'); which will reset the pickerButton content.
http://jsfiddle.net/scrs3Le5/1/
enyo.create({
components: [{
kind: "onyx.PickerDecorator",
name: "DecoratorName",
components: [{
name:'pickerButton',
style: 'min-height:2.5rem;min-width:330px;',
content: "Click to Select"
}, {
kind: 'onyx.Picker',
name: 'PickerName',
components: [
{content: "Is broken"},
{content: "Is not cool"},
{content: "Is very very very very very very very cool!"}
]
}]
}, {
kind: 'Button',
ontap: 'ResetPicker',
content: 'ResetPicker'
}],
ResetPicker: function () {
//this.$.PickerName.setSelected(null);
this.$.pickerButton.setContent('Click to Select');
},
rendered: function () {
this.inherited(arguments);
}
}).renderInto(document.body);
Hope that helps!
Related
I am using angular-formly in the angular 4 projects.
The scenario of the work is I have the list of the users and each user has got edit and delete button.
When a user clicks on the edit button a modal is shown up with 2 fields, one is an email address and another one to change the role of the user.
I am using <formly-form> to render the form onto the modal like this.
When edit button is clicked this modal gets opened, where I wanted to show the email address which is associated with the edit button which is clicked.
Also, I want to keep the role selected in the dropdown for that user.
Here is the formlyfieldconfig
{
key: 'email',
className: 'col-sm-4',
type: 'input',
defaultValue: '',
templateOptions: {
type: 'text',
label: 'Email',
disabled: true,
placeholder: ''
}
},
{
key: 'role',
className: 'col-sm-4',
type: 'select',
defaultValue: '',
templateOptions: {
label: 'Select Role',
options: [],
required: true
}
}
As you can see, above for email field I have kept defaultValue as null, whereas for role field I have kept defaultValue and options as null.
When a user clicks on the edit button, I am dynamically setting the defaultValue and options property which should reflect in the modal popup form.
private edituser(account):void {
this.updateModal.show();
let userData = updateuserdata;
this._PicklistApi.findById('5c45b9e06c0bbc57b5d43a66')
.subscribe(picklist => {
if(picklist && picklist['options'].length) {
_.find(userData,{'key': 'email'})
.defaultValue = account.email;
_.find(userData,{'key': 'role'})
.defaultValue = account.role;
_.find(userData,{'key': 'role'})
.templateOptions.options = [...picklist['options']];
}
});
this.updateuserdata = userData;
}
this._PicklistApi is a service object which will give me the list of all roles available.
updateuserdata will have the actual form field config which is passed to the <formly-form> component in HTML.
account parameter is user object having user data including email and role.
when a user clicks on the edit button edituser() gets called, and it sets the select options properly with the available roles.
But, it is not setting up defaultValue for both the email and role fields.
I am not able to understand this behavior as select options are getting set properly whereas it is not setting up the defaultValue for both the fields.
If I do console log then I do see that defaultValue is set for the both of the fields then why it isn't reflecting in the form.
Currently I am facing this issue
I have this array and this select html
$ctrl.languages =
[
{
key: 'Play Prompt',
value: 'blank'
},
{
key: 'Dont Play Prompt - Assume English',
value: 'English'
},
{
key: 'Dont Play Prompt - Assume Spanish',
value: 'Spanish'
}
];
<select class="form-control" name="vdn" ng-model="$ctrl.ivr.Language"
ng-options="item.value as item.key for item in $ctrl.languages" ng-required="true">
</select>
I use that dropdown to show the key in the current dropdown for each option, and I save the "value" property of the option selected in a database but when I retrieve the data the option with the "value" ssaved is not selected.
In this case if I save 'blank' value in the database I want the dropdown to have the 'Play Prompt' key selected.
Thanks
This looks pretty straightforward.
I've provided a working plunker here: https://plnkr.co/edit/sCusyXaSJdO0sjgm3csE?p=preview
Let me know if you were looking for something else.
In my code, I've added a timeout to simulate a web service call.
Here is the controller code from the plunker:
app.controller('mainController', function($scope, $timeout) {
$scope.languages = [
{
key: 'Play Prompt',
value: 'blank'
},
{
key: 'Dont Play Prompt - Assume English',
value: 'English'
},
{
key: 'Dont Play Prompt - Assume Spanish',
value: 'Spanish'
}
];
$scope.ivr = {};
// Simulating Web service Call
$scope.retrievingData = true;
$timeout(function() {
$scope.ivr.Language = 'blank';
$scope.retrievingData = false;
}, 2000);
});
You're setting up item.value as the value that gets set to $ctrl.ivr.Language whenever an option is selected from the dropdown. Since the <select>'s ngModel directive is pointing to $ctrl.ivr.Language, setting a value to $ctrl.ivr.Language within the controller will automatically add selected="selectd" to the item in the dropdown that has a value property that has a matching value.
Therefore, if you want "Play Prompt" to be the value that is selected in the dropdown when the database doesn't contain a value for that setting, then you can check whether the value exists in the API response, and if it doesn't, then set $ctrl.ivr.Language = 'blank' to default to the "Play Prompt" option.
I have changed DojoSelect to ComboBox in this example. So code for drop down become like that:
{
name: "alfresco/forms/controls/ComboBox",
config: {
label: "List Type",
name: "prop_dl_dataListItemType",
value: "",
firstValueIsDefault: false,
showAllOptionsOnOpen: true,
optionsConfig: {
queryAttribute: "label",
labelAttribute: "label",
valueAttribute: "value",
publishTopic: "ALF_GET_FORM_CONTROL_OPTIONS",
publishPayload: {
resultsProperty: "options",
url: url.context + "/proxy/alfresco/api/classes/dl_dataListItem/subclasses",
itemsAttribute: "",
labelAttribute: "title",
valueAttribute: "name"
}
}
}
}
Everything work with aikau version 1.0.99 (it is important). But ComboBox show it's content only when click to right triangle is performed. E.g. when user clicks on to input field nothing happens.
Is there a way to make alfresco/forms/controls/ComboBox show options when click to string input is performed?
This was raised within an issue on GitHub here and addressed under this JIRA ticket. The fix is described in this pull request.
Essentially you need to configure showAllOptionsOnOpen to be true
Everything hi, I use search of sharepoint the list, I see information in case of a choice, but I can't understand to copy field value, look for in other, I instead of values quit an ID (1, 2, 3, 4...), it is necessary that in the field of "Title", it was copied in case of a choice information from the "Select" field why so occurs? I.e. if selected User from the list, User in the field shall be shown.
here code:
ExecuteOrDelayUntilScriptLoaded(LoadSLNCascade, "SP.js");
function LoadSLNCascade() {
$('#countries').SLN_SPcascadingdropdown(
{
relationshipList: "List",
relationshipParentList: "List",
relationshipParentListColumn: "First",
relationshipListChildColumn: "First",
relationshipListParentColumn: "Seccond",
childDropDown: "cities",
autoFillParentDropDownList: true,
defaulFillChildDropDownList: false,
promptText: "-- Select Value --"
});
}
$('#countries').change(function() {
$('#TitleField').val($(this).val());
});
This answer:
$(document).ready(function() {
$("#list").change(function() {
$("#field").val($('option:selected', this).text());
});
});
I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.
Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.