Sapui5: How can I preform an action on OPA5 then function? - sapui5

I have a test journy that clicks a button and expects to a specific answer,
it works like this:
When.onTheHomePage.iPressTheSearchButton();
Then.onTheHomePage.iSholdGetResponse(answer);
So after I click the button I want to see if I get the correct answer.
The thing is that I want an action that if it didn't find the answer it will click on another button
iSholdGetResponse: function (sAnswer) {
var modelAnswer;
return this.waitFor({
viewName: "Home",
matchers: function (oPage) {
var sExpectedObj = oPage.getModel("msgData").getData()['msgData'];
var sExpectedRes = sExpectedObj[sExpectedObj.length-1];
modelAnswer = sExpectedRes.Text.toLowerCase();
if(modelAnswer.indexOf(sAnswer.toLowerCase()) >= 0){
return true;
}else{
//NEED TO DO HERE CLICK BUTTON *******
}
},
success: function (data) {
Opa5.assert.ok(true, "Answer Correct! (" +modelAnswer +")");
},
errorMessage: "Not expected answer"
});
}
So how can i trigger a click in matches property?

you have do it in separate test:
1.Test 1
When.onTheHomePage.iPressTheSearchButton();
Then.onTheHomePage.iSholdGetResponse(answer).and.iSeeTheIncorrectAnswer;
2.Test 2
When.onTheHomePage.iPressAnAnotherButton();
Then.onTheHomePage.iSholdGetResponse(answer)...

Related

In SAPUI5 SmartTable on event beforeRebindTable adding some filters

My requiremnt is to put some filters on smartTable form my controller.
In Event beforeRebindTable i am using the following code to put filter using this code which is working fine.
onBeforeRebindTable: function (oEvent) {
var oBindingParams = oEvent.getParameter("bindingParams");
statFilter = new sap.ui.model.Filter("Claim_TYPE", "EQ", "1234");
oBindingParams.filters.push(statFilter);
}
But the problem is when the user is clicling on table column on filter again, the filter i am adding in above code is not visible in the selection dialog. User may need to delete this filter, If its not visible in dialog they wont be able to delete it.
I am not able to establish the link why the dialog is not getting updated, or should i add this somewhere else.
Thanks
Sonal.
onBeforeRebindTable: function (oEvent) {
var oSmartTable = oEvent.getSource();
if (this._isOnInit == null) this._isOnInit = true;
if (this._isOnInit) {
oSmartTable.applyVariant(
{
filter: {
filterItems: [{
columnKey: "YourSelectedColumn",
exclude: false,
operation: "EQ",
value1: "SomeEnteredValue",
value2: ""
}]
}
}
);
this._isOnInit = false;
}
}

How to show/hide dialog fields with a checkbox in AEM Touch UI

I am relatively new to AEM and I am trying to hide/show dialog fields on checkbox click. I have tried some ways but failed to achieve this functionality. This is just for my own learning. How can I achieve this?
I have tried adding the js clientlib and adding some classes and target to the checkbox and target fields respectively as suggested in other answers but it didn't seem to work. Please help.
First you need to create a clientLibs and add categories as cq.authoring.dialog.all, see the code below:
(function($, $document) {
$document.on("dialog-ready", function() {
Coral.commons.ready($document, function () {
dispalyOrHideTabs();
$(document).on('change', '#showText', function() {
if($('#showText').attr('checked')){
show('1');
}else{
hide('1');
}
});
$(document).on('change', '#showTable', function() {
if($('#showTable').attr('checked')){
show('2');
}else{
hide('2');
}
});
function hide(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.addClass("hide");
}
function show(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.removeClass("hide");
}
function dispalyOrHideTabs(){
var editable = Granite.author.DialogFrame.currentDialog.editable;
if(editable){
var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
if(node){
var storedTextValue = node.showText;
var storedTableValue = node.showTable;
if(storedTextValue){
show('1');
}else{
hide('1');
}
if(storedTableValue){
show('2');
}else{
hide('2');
}
}
}
}
});
});
})($, $(document));
Add granite:id property as showText of the checkbox resource type.
And below is the dialog tabs which will be hidden and shown:

hide ul when user clicks anywhere site

my code is :
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#country_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajaxname.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
}
function set_item(item) {
// change input value
$('#country_id').val(item);
// hide proposition list
$('#country_list_id').hide();
}
and i wana hide ul (country_list_id) when user click on anywhere ?
and im not good in ajax :(
so any one can edit this code
Assuming you just want to hide the id when the user click basically anything.
Then here.
$(document).on("click", () => {
$('#country_list_id').hide();
})

kendo-ui autocomplete extend

I'm trying to extend the kendo-ui autocomplete control: I want the search start when te user hit enter, so basically I've to check the user input on keydown event.
I've tried to catch the keydown event with this code:
(function($) {
ui = kendo.ui,
Widget = ui.Widget
var ClienteText = ui.AutoComplete.extend({
init: function(element,options) {
var that=this;
ui.AutoComplete.fn.init.call(this, element, options);
$(this).bind('keydown',function(e){ console.log(1,e); });
$(element).bind('keydown',function(e){ console.log(2,e); });
},
options: {
[...list of my options...]
},
_keydown: function(e) {
console.log(3,e);
kendo.ui.AutoComplete.fn._keydown(e);
}
});
ui.plugin(ClienteText);
})(jQuery);
None of the binded events gets called, only the _keydown, and then I'm doing something wrong and cannot call the autocomplete "normal" keydown event.
I've seen a lot of examples that extend the base widget and then create a composite widget, but I'm not interested in doing that, I only want to add a functionality to an existing widget.
Can someone show me what I'm doing wrong?
Thank you!
What about avoiding the extend and take advantage of build in options and methods on the existing control : http://jsfiddle.net/vojtiik/Vttyq/1/
//create AutoComplete UI component
var complete = $("#countries").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select country...",
separator: ", ",
minLength: 50 // this is to be longer than your longest char
}).data("kendoAutoComplete");
$("#countries").keypress(function (e) {
if (e.which == 13) {
complete.options.minLength = 1; // allow search
complete.search($("#countries").val());
complete.options.minLength = 50; // stop the search again
}
});
This code actually work:
(function($) {
ui = kendo.ui,
ClienteText = ui.AutoComplete.extend({
init: function(element,options) {
ui.AutoComplete.fn.init.call(this, element, options);
$(element).bind('keydown',function(e){
var kcontrol=$(this).data('kendoClienteText');
if (e.which === 13) {
kcontrol.setDataSource(datasource_clientes);
kcontrol.search($(this).val());
} else {
kcontrol.setDataSource(null);
}
});
},
options: {
name: 'ClienteText',
}
});
ui.plugin(ClienteText);
})(jQuery);
but I don't know if it's the correct way to do it.

DOJO Datagrid remove row via button

I have a DOJO Datagrid up and running. It is based on an itemFileWriteStore.
Through a formatter-function I added a button including a OnClick-Function to
Get the the attribute "work_id" (it is in the store)
Make an Ajax-Call to delete the entry
Remove it from store and update the grid
Here's the Code:
//BUTTON-FORMATTER
function buttonFormatterRemove(){
var w = new Button({
label: "Löschen",
iconClass: "dijitEditorIcon deleteIcon",
showLabel: false,
onClick: function() {
console.log(this);
if (confirm("Datensatz wirklich löschen?")){
var item = grid.selection.getSelected();
var work_id = grid.store.getValue(item[0], "work_id");
//alert(work_id);
//FIRE REQUEST
request.post("<?php echo site_url('work/delete'); ?>/"+work_id, {
}).then(function(text){
if(text == 1){
console.log("Entry with ID"+work_id+" deleted!")
workStore.deleteItem(item[0]);
grid.startup();
} else alert("Es ist ein Fehler aufgetreten");
});
}
}
});
w._destroyOnRemove=true;
return w;
}
So far so good...it works! But only when I clicked into the datagrid before. Doesn't matter where I clicked.
If I refresh the page and click the button directly it throws:
Uncaught Error: dojo.data.ItemFileWriteStore: Invalid item argument.
Does anyone know how to get a handle to work_id in the specific row?
Thank you in advance!
AFX
I was able to fix it myself:
I realized that the formatter has optional arguments:
//BUTTON-FORMATTER
function buttonFormatterRemove(col, rowIndex){
With those arguments I could get a handle on the row:
var rowdata = this.grid.getItem(rowIndex);
var work_id = rowdata['work_id'];
This blog-post helped me alot: http://documentumcookbook.wordpress.com/2010/08/06/dojo-datagrid-combining-field-values-in-formatter/
Thanks anyways!