I'm using HP UFT for functional tests.
Because of dynamic id definition of ExtJS, I can't use UFT Recording feature.
I've tried many ways for assigning dynamic IDs to staticly.
I tried to change id: function() in ext-all-debug.js file.
I tried to change Components getId() function in ext-all-debug.js file.
I tried override components with afterRender method to change ids aswell.
Sometimes I achieved to change id's using component's properties (text, fieldLabel, overflowText, etc.), but for some components I couldn't achieve to assign ID's since the components properties seem empty.
Above, I listed my actions to assign static ID. So, I want to know your opinions about my actions and if you found them incorrect or not sufficient, could you offer me new approaches for using HP UFT recording feature with ExtJS6.
You can't change the dynamic id of the dom elements which represents ExtJS components. That's really bad thing and I think you would break the whole app.
The easiest way to test ExtJS app is to use already created frameworks/tools like:
Siesta by Bryntum
Sencha Test by Sencha
The Siesta is free. It has some pro features which requires the license. But you can use it for free.
If you still insists on doing it your way. You need to dynamically get the IDs of the dom elements created by ExtJS components. Basically write your own API.
You need to execute the ExtJS JS code, which will return you the ID of the component. So you need to get the ExtJS component and call getId() function on it to get the dom id.
Here is the example code:
>Ext.ComponentQuery.query('checkbox')[0].getId()
"checkbox-1047"
You will definetely need: http://docs.sencha.com/extjs/6.5.3/modern/Ext.ComponentQuery.html#method-query
And keep in mind that the query can be pretty advanced and you can use all the configs which are set on the ExtJS elements such as name, xtype, etc
You can find some other info in my other anwser https://stackoverflow.com/a/41718879/1768843
Related
I have build my website using react. I have import a new library for other features the issue is that the new library used id and I have not assigned id to tags since all are rendered using a loop. Changing the code to give id to all tag is difficult since the code is spread across multiple files. What can I do in that case?
I have tried give id using this "uniqueid" library but it is really difficult to do.
I want a way in which all tags get a unique id.
Sorry if my question is silly but I'm new to DNN/2sxc, I've spent the whole day trying to figure this with no success..
I have two instances of the same app, one in the home page and the other on its own page, each one must have its own view template (I use Razor).
My problem is I cannot figure a way to make the two apps read the same data, so every add/edit/remove/re-sort in one of them will be reflected to the other, currently each app has its own data and therefore they are unusable in my case.
I've tried to use a 'EntityTypeFilter' inside a 'Data Query' and use it in both views (as in the News-Simple demo video), it worked and gave me all the items in the two views, but another two problems come with this solution:
1- now I'm unable to use the toolbar to (add/remove/reorder,.. etc) any of the items , as you can see in this image, which is a show-stopper for me,
note: this is the toolbar I use:
#foreach(var item in AsDynamic(Data["Default"]))
{
...
#Edit.Toolbar(target: item, actions: "new,edit,replace,remove,moveup,movedown,instance-list")
2- the 'Content Demo Item' is also visible in the list, but it is not that important since I can delete it and use one of the real data items as a demo item.
I appreciate any kind of help.
Thank you.
So the first thing you should know is the difference when using content-items as data (to query, etc.) and when using it as assigned-items (where each module-instance has a subset of items). Here's the blog that should help you understand the difference: http://2sxc.org/en/blog/post/12-differences-when-templating-data-instead-of-content
So when you want the "manually and easily control the exact items displayed, their ordering etc." you want to use the "content-assigned-to-instance" which also gives you the simple add, delete buttons, as these don't really delete anything, but just remove the assignment from the module-instance.
Now your case is a bit special, in that you want to re-use the exact same set in another module-instance. There are a few ways you can do this:
Same View
if it's exactly the same view etc. just duplicate the module using DNN-features (the add-existing-module-to-another page)
different view
if it's a different view (maybe more compact, etc.) you again have multiple options. The first is to mirror / duplicate using the dnn-feature, and just put an if-im-on-this-page-then-show-differently or inject another CSS. That's probably the easiest without any dev-know-how.
The harder, but possibly nicer way, is to actually to use a new template, and tell it to retrieve the items in the way they are configured in the other module - let's say module 1 is the original, module 2 has a different template wanting to access the items of module 1 in exactly the same order as given in 1. They way to do this is simple, but requires a few lines of C# code in Module 2.
You need to create a new ModuleDataSource (https://2sxc.org/en/Docs/Feature/feature/4542) object and tell it that it's from Module 1. If you've never done this, it's basically that your code can create a query just like the visual designer, but you have more control - see the wiki https://github.com/2sic/2sxc/wiki/DotNet-DataSources-All. The Module-Data-Source in the visual-query-designer doesn't allow you to "switch" modules (a advanced setting we may add in the future) but the object has a ModuleId property which you can set before accessing the data, making it "switch" to that Module. here's the Pseudo code in your Module#2 razor...
var otherModData = CreateSource<ModuleDataSource>();
otherModData.ModuleId = 1;
foreach(var itm in AsDynamic(otherModData["Default"])) {
...
}
That should do it :)
I've been looking at using Angular Schema Form to define all my forms for my project but one thing that stood out to me massively is that when we define a select/drop-down element, the values have to be specified then and there in the JSON. This doesn't strike me as very flexible as I want these values to be retrieved from my Angular controller/factory as they are currently available on the scope.
I've done quite a bit of searching on how to get round this but haven't found a definitive solution or anything that worked for me so I decided to try to extend the Select myself and add a mapping to the schemaFormDecoratorsProvider.
I have followed the documentation for Extending Schema Form, and now have an HTML snippet which defines my Select control and this is being rendered when I define it in my JSON schema. What I want to be able to do is to specify the ng-options attribute either in part as a whole via the JSON schema. I have tried to do this but nothing seems to result in the select options being rendered.
Here is part of my select control:
<select ng-model="$$value$$"
ng-model-options="form.ngModelOptions"
sf-changed="form"
schema-validate="form"
ng-options="item.value as item.name for item in form.titleMap"
ng-disabled="form.readonly">
</select>
Where ng-options is defined, I want to be able to either specify titleMap in my JSON and it be resolved to an object on my scope or I can pass the name of the collection in my JSON and then pass that in where form.titleMap currently sits.
Anybody had any experience doing this? To me is seems like a fairly reasonable requirement but can't find much help on the web about it.
Many thanks.
There are add-ons designed to support dynamic data selection, the library has no preference and leaves it up to the developer to select the most appropriate for their needs, however I built the Material Design decorator to include the capabilities of angular-schema-form-external-options in the decorator so the add-on is not needed. The bootstrap decorator does not have this capability at this stage.
The angular-schema-form-external-options library is basic but covers most requirements for simple dynamic drop down data population
The angular-schema-form-dynamic-select is a more robust and feature full option with a variety of configurable options.
I have seen this bunch of code in a tutorial:
var searchTerm = this.$('#searchTerm').val().trim();
I would like to understand the utility of the this. in front of the selector, it's the first time i see that.
In a Backbone.View, this.$ gives a scoped version of jQuery. It is in fact equivalent to using this.$el.find which is in turn equivalent to using $(this.el).find.
Anyhow, the reason it is a good idea to use it is that it will only access html elements from within the view's element/rendered template. Thus, you don't have to worry about the rest of the html page and you will always select the element you expect to.
Imagine that you have a view that spawns sub-views and that each of these have an editable field. If you don't use the scoped version of jQuery to get the right editable field, you will have to give a unique id to each of these html elements to make sure you will select the right one when retrieving it's content. On the other hand, if you use the scoped version, you will just have to give this editable field a class attribute and selecting this class will give you a unique element, the right one.
This is the same query as this.$el.find('#searchTerm').val().trim();
You haven't given any context to that code, but assuming it's a method inside a View, this refers to the View object.
this.$ is a shortcut to access jQuery from the View object, and is equivalent to the method this.$el.find.
What's best method within cakephp site for-
two dropdowns
one listing cds, one listing artists
on select of either cd or artist I need my additional text to appear below dropdowns
I have been searching through tutorials and manual - with no success. I am looking to learn by basic example - from form/view and controller.
latest try was something along this example to get dropdown [Dropdown select list in CakePHP
Although CakePHP techniques apply, the way that I'd do this in CakePHP is the same way I'd do it in any app. I'd use Javascript (the jQuery framework in my case) to:
Bind an event handler to the change event of each dropdown
Make an Ajax call to a URI that returns the "additional text" to be displayed below the dropdown
Display said text
In the CakePHP context, I'd create methods in my CdsController and ArtistsController (I'm guessing at your naming convention, of course) to respond to the Ajax request.