Hi I am really new to Angular2 (I know most of the concepts that angular2 provides tho) and I am having problems with getting specific data after choosing some options.
Currently, I have fake database and created some profiles of random people in the database.
And I have components with dropdown options. I want users to choose one of the options and once they are done with choosing, I want them to click 'Complete' button.
Once they do, they will be redirected to another component that shows data corresponding to their choice.
I am guessing I need to store data that users choose into a service and communication between these two components(one components with options, the other with lists of information based on users' choice) should utilize the service.
But I've got no idea how to do so. Help will be appreciated! Thank you!
First,Define you routes with an parameter like '/anotherRouter:option'
Then, keep the selected option in you component.
<select id="option" name="option" required [(ngModel)]="selectedOption" #address="ngModel">
...
</select>
Then, By click the Complete button, goto another component like this.
<button (click)="go()">Complete</button>
And at your component, define a function go like this(let guess you have inject Router from #angular/router):
go() {
this.router.navigate(['anotherRouter', selectedOption]);
}
Then get the selectedOption in your new component from the Params of #angular/router like +params['option'](the parameter passed while navigate).
Related
My problem is to load a select field in touch UI dialog with dynamic options. These options are coming from a external URL via webservices, I am consuming this RESTful services using url defined in one of our global javascript objects like
$.get(mec.serviceConfig.baseUrl + '/movies';
Please understand that the options are coming from third party webservice please do not mention datasource. Whenever I search for loading select options dynamically I get this tutorial
Link to Tutorial
This is is not what I want.
In classic UI it is easy with optionsProvider.
In touch UI I am trying to write a script that fetches the data from the external webservice via AJAX ON DIALOG load and set these options in the select field.
Is there any better easier approach ? Can someone please share code snippets?
you should create JS listener for your component.
$document.on("dialog-ready", function() {
// there you should find your select field
//for example
var language = $("[name='./language']").closest(".coral-Select");
//then append to your select field new options from your datasource
});
please see doc: Dynamically updating AEM TouchUI Dialog Select Fields
On creation of new external user from ATG BCC, I need to include some logic like encrypting password and sending email to user. Achieved this functionality by extending GSAPropertyDescriptor class and overriding its getPropertyValue(RepositoryItemImpl pItem, Object pValue) method.
Problem is, this method is getting called only when we click on create button from "General" tab present in users section, but not on click of same create button from other tabs like "Commerce", "Orgs & Roles", "User Segments" and "Advanced".
Please suggest!!
It is not a good idea to override getPropertyValue of an item for this implementation. The right way to do this is to work with the formhandler that is responsible for saving the user. It is a bit tricky to find this formhandler. It will be in the atg/web/viewmapping/ViewMappingRepository/ of the BCC instance. In this repository there will be lots of formhandlers configured for different purposes. You have to pick the one relevant for the user edit. Here is an example of what you might find there:
With this, you go to appropriate Formhanlder, like /atg/web/assetmanager/editor/profile/UserFormHandler mentioned here. And override that component in your module with your own implementation. Once that is done, you'll have the control of the action. You can do your work and pass on the control to super class (the original implementation).
Regards,
Jags
We want to develop a smooth-flowing workflow experience (but still use workflows). Currently, a user needs to use the sidekick to initiate the workflow, then to the inbox, which takes them back to the page to use the sidekick again. When they go to the inbox, they need to restrict to the model and path of the page. It would be nice for the user to only have to go to the content page and from there, launch the different workflow forms that need to happen, like a little "inbox" right on the page that is subject to the workflow.
I have written a custom component that can initiate the custom workflow. The custom component can also query the WorkFlowSession and obtain any active WorkItems for the current page that the component resides (using the WorkItemFilter interface). What I want to do is provide a link to the user to the next step in the workflow from the custom component, just like the inbox does.
Here is an example output from an WorkItem instance toString method:
21.05.2014 09:45:29.300 *ERROR* [0:0:0:0:0:0:0:1%0 [1400679929160] GET /content/test/mailing1.html HTTP/1.1] org.rand.whatcounts.EmailCampaignCoordinator Found workitem: -----------------------------
WorkItem Id: /etc/workflow/instances/2014-05-21/model_1400679794564399000/workItems/node4_etc_workflow_instances_2014-05-21_model_1400679794564399000
Workflow Id: /etc/workflow/instances/2014-05-21/model_1400679794564399000
Payload: /content/test/mailing1
Payload Type: JCR_PATH
key = historyEntryPath value = /etc/workflow/instances/2014-05-21/model_1400679794564399000/history/1400679924113
key = comment value =
My hope is that by using the workflow api items, I can create the link that the user could click on to proceed in the workflow (just like the inbox).
Thanks for listening!
Phillip
There are two ways to implement this
Java-Based Solution
I was able to figure out one way by looking at
http://localhost:4502/libs/cq/workflow/components/inbox/list/json.jsp
The important part of this jsp is that, given a workItem instance, you can get the path for your next step using the JcrPathBuilderManager:
pathBuilder.getPath(wi);
Using this, I was able to output a link to the next step in the workflow to the user (without having user go to their inbox).
Javascript/JSON Based Solution
I didn't go far with this solution (I didn't write any js) but this was my fall back position if I didn't find the java-solution listed above. Once could implement custom JS in CQ Component that would call the json feed for the user inbox, do some client side filtering (to restrict it to only items related to current page). The URL to the feed is
http://localhost:4502/libs/cq/workflow/content/inbox/list.json?start=0&limit=40
Thanks!
I am not 100% sure if this is as big an issue has I seem to think it is right now but I think I may of found an issue or at else an hole within the Inspect Element viewer within Chrome.
I was using (I have now changed my settings) hidden ID's to set a number of defaults, one was users levels, another was to make the user active by default.
However when I view these ID's within the inspect Element view and then changed the values, submitting the form would submit the NEW value to the server and not the value I had given it.
For Example:
I had something like the following within my code,
<input type="hidden" name="data[user][level][id]" value="1" id="MyID">
I then changed it within the Inspect view to,
<input type="hidden" name="data[user][level][id]" value="2" id="MyID">
Then I submitted the form and was surprised that the NEW value was submitted, I was always under the inpresion that hidden ID's where not changeable and the browser should only submit the default values held within.
I have now changed this to letting the database default to a basic user and then I can change the users setting has I want to. But in some cases this may not be an option, so I was hoping for an answer or some feedback about how to make this more safe.
Am I just a bit slow, are there better methods (different ones) to passing 'hidden' data from forms to the server?
I was thinking about maybe using JQuery to add the needed hidden fields to the forms once the user had selected / submitted the form, but i am not sure if this is 100% safe or even if its a good idea.
Any ideas / feedback are very welcome.....
Many Thanks,
Glenn.
I had the same problem passing the database data into a modal,the solution i know is to use jquery ajax to get the informations from the database requesting a file,adding them into variables and compare the variables
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
I used this code sample to do it.
Of course there are a few modifications to be done depending on your script
I found a better way of doing this, at lest in CakePHP. The CakePHP framework has inbuilt security calls. These in-built functions when added give you all sorts of stuff but the main reason I used them was to stop this sort of form tampering.
I am not 100% sure how it does this, but it adds a token to all forms and it checks to see if the form being submitted is right? Again not sure how the token works.
But here is the code I used ::
public function beforeFilter() {
$this->Auth->allow('index', 'SystemAccess');
$this->Security->blackHoleCallback = 'blackhole';
}
public function blackhole($type) {
$this->Auth->logout();
$this->Session->setFlash('Sorry a security issue has been detected, please try again or contact us for support.', 'default', array(), 'bad');
$this->redirect($this->Auth->redirect('/'));
}
Now I will add that the call the Auth logout I added to this for extra added security, as the user maybe have logged in on a system and it just not be them that is trying to do things that they should not.
Hope that helps others out!
But this is only a fix for when CakePHP is in use. I would take it that other frameworks would have their options but if your only using basic HTML? or a CMS like Drupal again there might be in built security.
Many Thanks
Glenn.
The only safe and best solution that I found for this issue is to check on the server side whether the user_id sent with the form is the same user_id logged in with or not.
Although using jquery is good idea, but, did not work with my case as am using data: $(this).serialize(),
However here's my code on the server side (Note, am using Laravel 5.4, but am sure it won't matter with your case)
if ($request->user_id != Auth::user()->id)
return json_encode("F**K YOU ! Don't Play Smart -_- !");
else
raw_material_category::create($request->all());
Hope this helped ;)
I've integrated Boronine's excellent field validation code for ember.js from jsfiddle. While that is wonderful, I still need to perform form level validation, to ensure that when the user submits the form, everything is okay.
What's the best way to do that? Is there a way that I can mark a field as having been validated, so that the form handler can simply walk the fields to see what has been validated or not?
MP.SignUpFormView = Em.View.extend({
submitLogin:function (event) {
// walk through object fields to perform validation here, but how?!
}
});
Edit:
For clarity, I am using Handlebars and binding, not trying to walk DOM objects or the like.
The pattern you're trying to use makes sense in applications that follow a document-scripting pattern, which Ember does not. You can force this work, but you'll find each next step in the application will get harder and harder.
In Ember display is backed by data objects so form fields in an Ember application are bound to a property on some object and as changes are made, the values are updated immediately. You don't even really need a <form> except maybe for styling.
When a user wants to take some action on this object (like persisting it to a server) the application's current state will answer the question "what happens when a user wants to take this action right now?" A user clicking a button here doesn't mean "now serialize the data in the form and do something" it means "I'm done changing the properties of this object and would like to do something else in the application now."
Your handlebars template would look something like this:
{{view Ember.Textfield valueBinding="name"}}
{{view Ember.Textfield valueBinding="age"}}
<button {{action save content}}>Save</button>
And a possible state in your application where this can be handled
Ember.Route.extend({
save: function(router, event){
if (event.context.validate()){
router.transitionTo('someNewState')
}
}
})