I am new to Angularjs. I have a page like this.
I have a single controller which does all the work which is currently working fine. I want to manage my code to use angular-given-functionalities by using filters, services, controllers etc.
In this page i have many sections i am mentioning here.
Search filters
Category
Attributes
Tags
Pagination Section plus Grid or List links
Sort plus Compare section
Product data to display
How can i break my code in separate chunks to manage it properly.
I have created a service which does all ajax related work.
Here is the dependency.
1. Search does nothing except page redirect
2. Category can have a view more which will update itself will more then 10 records
3. Attributes can have viewmore button to display more then 10 attributes. Attribute can also impect on the following
When we select single on multiple attribute it will change
1. Category
2. Attributes
3. Tags
4. Pagination
5. Listing (Product data to display)
4. Tags can be removed and can have excatly same behavior as Attributes
5. Pagination will change itself and product data display
6. Sort will have same as pagination
7. Nothing
I dont need code just some suggestions on how can i choose things from Angular to make managed code.
Related
I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.
Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.
Can you please help me?
It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.
Example:
localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100
...
On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.
skip = (pagNum - 1 * pageSize)
limit = pageSize
Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.
Documentation for skip/limit on sails
http://sailsjs.org/documentation/reference/waterline-orm/queries/limit
http://sailsjs.org/documentation/reference/waterline-orm/queries/skip
Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.
You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes
I have different fields and showing in different blocks, and want to apply exposed filter to all but my problem is it shows different exposed filters for each different block. I want to make it common for each block.
Below are the steps,
I made 5 blocks to be displayed for each buttons.
Added exposed filter for languages for each block.
Now each block showing its different exposed filter.
But I want the exposed filter should be shown above the buttons and should work for each block display. Attached screenshot for the issue.
I installed Views Global Filter but is gives Session error.
I was just about to suggest the Views Global Filter.
Another way is to set a contextual filter on all your blocks that pulls from the url, so they each pull the same value.
This is an active issue in the views issue queue, with a few people who have made it work:
https://www.drupal.org/node/1587894
Comment #6 has some simple code, and that would be applied here
https://www.drupal.org/node/1871388
After 3 days, I haven't found the solution, even by programmatically.
Then what I had the last option(in my mind, huh) is,
I get all the fields in one block only, not creating the different blocks for different tab or buttons.
Used the description of Better Exposed Filters, in which I pasted my buttons/tab UI HTML as its.
Now on changing the language all the fields are fetched according to the selected language. But in this case my active tab/button get lost its activeness.
Now, I need to get the last active tab/buuton, so that I can click it again to get the active tab after filtering my languages.
Below is the piece of code which is need to my js file.
// Active target element to make the tab/button active after
// ajax responds in filter
var activeTargetElement;
Drupal.behaviors.events = {
attach: function (context, settings) {
$('#views-exposed-form-MY_VIEW_MACHINE_NAME-BLOCK_NAME', context).ajaxStart(function () {
// my tabs/button are active on the basis of data-target attribute,
// so need to memorise which tab/button is active before fitering any language
activeTargetElement = $('#MY_TABS li.active a').data('target');
}).ajaxSuccess(function () {
// if any target is memorised, then simply click it or trigger a click event for it
if($('[data-target="'+activeTargetElement+'"]').length){
$('[data-target="'+activeTargetElement+'"]').click();
}
});
}
};
I am using Angular JS - ng-table. Which generates grid structure with Sorting, filtering, pagination features.
We are using Coded UI automation tools which expects all HTML controls should be Unique.
For Example :
Lets have Grid Table consist of Employee records.
Automation Tester wrote a test cases expecting the first 1-10 records are having unique Id (Emp1-to-Emp10) which is NOT going to be changed.
But when Tester sorting the Grid then whole structure of Grid is being changed.
First 10 records will have - Emp11,Emp1,Emp4,Emp5,Emp37,Emp42,Emp67,Emp89,Emp12,Emp10.
when the Tester re test the test case it FAILs .
So, how to maintain the consistency for dynamic records unique ids with the combination of Angular JS + Coded UI?.
Thanks
Gokul
I would say that what is happening is expected sorting behaviour..
Some ways that you could solve your problem. From the tester's point of view:
Tests should restore the page to the initial state before ending. For example if the test sorts a table, it should 'un-sort' the table before it finishes. This leaves the data in an expected state so that the test can be repeated
Don't select things by id. All the test frameworks I know of allow you to select things by css selectors, which can do much more powerful selections than by id. E.g. you could look up a row by the employee Id and it would find it regardless of what order the table is in.
From the developer's point of view:
I presume the rows are items in an array. You can assign a unique id as a property to each item in the array and use it in the template markup. The unique id would not be affected by any sorting.
Unless you are using a very unusual framework or constrained by strange rules, I would suggest that the automated tests are amended rather than the code.
I'm trying to use columns in a form.
I have the next code, that produces the
The code is this:
$col=$this->add('Columns');
$left=$col->add($f->addField('text','observaciones'));
$right=$col->add($f->addField('line','cantidad_de_bocas'));
the fields of the columns, are based on form fields. I whant to add more than one field to the columns (ex. 2 fields on left column and 4 fields on right columns).
I have seen some examples about this, like
$col=$page->add('Columns');
$left=$col->addColumn(2)->add('View_SlotMachine');
$right=$col->addColumn(2)->add('View_SlotMachine');
Why the fields are duplicated ?
What does the method addColumn(2) does ?
Very thanks
If you havent gone to far with development using atk 4.1, you could download 4.2 and look at the examples here. There is a lot of new functionality in 4.2 which you can take advantage of and the demos and examples are being updated to reflect these changes.
In 4.2, there is an example of styling with two columns like this
class StylingForm extends Form {
function init(){
parent::init();
$f=$this;
$f->addField('line','name')->validateNotNull()
->setFieldHint('Click "Register" to see error');
$f->addField('line','email')
->validateNotNull()
->validateField('filter_var($this->get(), FILTER_VALIDATE_EMAIL)')
.. .. ..
}
functoin init() {
// Stacked class puts labels on top of fields
$form=$page->add('StylingForm');
$form->addClass('stacked atk-row');
$form->template->trySet('fieldset','span6');
$sep=$form->addSeparator('span6');
$form->add('Order')->move($sep,'before','age')->now();
}
In atk4.1, the form is a view so it has a template in atk4/templates/shared/view/form.html and some code in atk4/lib/View/form.php
In the example of the slot machine that you mention from here the addColumns(2) is being used to set the width of the views to 20% of the available screen width but in the example, each column will contain a view of the slot machine. If you wanted to forms on the same page, you could use the same functionality, but what you appear to want is a single form across two columns with a single submit button.
If you have to continue to use atk4.1, you need to look at the form.html. Romans may be able to suggest how you could create a two column form in that version. I can see there are some classes defined in the css such as atk-form-vertical-2col and atk-form-vertical-3col and there is a function setFormClass to set them but i cant see what tags you would set to put fields into the right hand side - by default, everything goes to the left.
In salesforce I need to create a visualforce page that includes the fields of 2 objects. The first object is the QUOTE object. The second objects is a custom object with several fields.
I want to create a visualforce page that shows the records of both QUOTE and the new object. Can I do this without creating a custom controller? If no any hints on the code for this new controller?
Can I do calculations between fields in a visualforce page?
Ideally I want this page to appear as soon as the QUOTE is set to ACCEPTED
1: You can't do this without a custom controller unfortunately, unless one object is related to the other and you're just happy displaying it as a related list on the parent object's page. For calculations you could use rollup summaries for some basic sums etc..
As for a custom controller, have a look at field sets for a super easy way to get fields into a VF page, you essentially configure groups of fields on your objects and then you can stick those groups onto a page with minimal markup.
2: For fields with complex calculations you'll want to do the sums in the controller and then expose the results through variables onto the page in the usual manner.
3: Not really possible without creating a custom edit page in the first place — you'd be better off having a button on the quote page to open up the Visualforce page, that page can simply display an error if the quote is not yet accepted. There are some other alternatives that might work though, like using a forumla field to generate a link to the page when the status is as you desire.
I'm happy to elaborate on any of this, but the fact that you're asking about number 2 would suggest to me that you don't have much experience developing on the platform (not a dig, just an observation), so unless you're comfortable coding in other environments you could find this quite tricky. That said, you're on stackoverflow so I'm thinking you probably know a little about coding at least!