How to bind a Knockout js model to a wizard style UI - javascript

I am using Knockout js. I have a view model that contains an array of objects and I want to allow the user to edit one of the objects using a wizard style interface. The issue I have is the wizard will show different steps depending on what choices are made. For instance:
If the user selects 'Yes' on step 1 then I display step 2a
If the user selects 'No' on step 1 then I display step 2b (ie. a different dialog form)
This goes on so that the paths through the wizard are not linear.
My question is do I bind all the possible wizard UI steps to the view model at start up even though some steps will never be shown and the bindings on some screens will be invalid (eg. step 5 may bind to viewModel.theObject.PropertyA.PropertyB.PropertyC() but PropertyB is still null at step 1).
A better way may be to bind to the UI steps as they are displayed but my problem is then there I am not aware of a good way to 'unbind' the model once the step has completed so I could end up with the step bound to multiple objects from the original list!

I think that a good way to do this is to have your view model be an array of steps and bind your UI to the "selectedStep". Then, each step can dynamically choose which template that it wants to use (like in this post).
Here is a rough sample of the idea: http://jsfiddle.net/rniemeyer/SSY6n/
This way the template bindings handles generating/binding/cleaning up the dynamic content based on whatever step is selected. If the steps are in an observableArray, then you could even dynamically add steps. Maybe you have a list of all of the possible steps and then have an "activeSteps" array that represents the steps that are currently valid based on the user's choices.

Related

which is better to perform logical operations in angularjs controller or view?

My website contains posts something like blog posts, a registered user can post things and any other registered user can view them, here when showing individual post I kept an follow button for to the viewer so if the viewer clicked it and follow the author(post owner). Now the problem is every time when a viewer clicked and see individual post I need to check whether viewer is already following that author or not so that I have to choose follow or following button to display. In my angularjs controller I have json array of authors(following authors). How can i check the individual post author existing in following authors in controller or is there any chance to perform this on view? O am using angularjs 1.x
Anyway you have to set a flag for the buttons choice (true for follow button and false for following button).
To set the scope of this variable you need to implement the logic in JS (Since its an array collection). Now in HTML you can show the follow or following button by using ng-show and ng-hide. (ng-show="isFollow")

Different view levels according to user's role

in my application, I would like to achieve multi access level for different users depending on their role. I am developing application in openUI5. When I log in to the application I know what roles user have. And according to that roles, I would like to display or hide certain links, tiles, gui components.
Multi access level I mean
displaying/hiding gui elements
disallowing routing to specified places in application
The point number 2. I have achieved. That's no problem - according to role, I add specific routes to allowed routes.
I would appreciate an advice for point number 1. what would be the best practice?
Thank you
Depending on the user's role (a set of authorization rules), you can control the UI in a following ways:
Huge differences in UI
If the UI should be VERY different depending on user role, it makes sense to implement different set of views created for each role or even apps.
A few "change points"
In case of not really much differences, you can set up the configurational JSON model, which will contain visibility rules for a certain UI element and you will bind the "visible" property to this configurational model. A set of rules can even be fetched from backend, so it won't be a hardcode on UI, which is pretty handly for customizing reasons.
User authorization + object state handling
It is also might be the case (very often in my projects), that not only user role has influence on the state of the UI, but the object's state or business logic should define how the UI should look like. I'm talkin about the things like:
should the filed be displayed or hidden; read-only or editable mode allowed;
should the action buttons be hidden/visible/clickable and so on;
should the any UI part be hidden/displayed.
In this case it's easier to let backend control over that by using so-called "field controls". They are simple properties in your OData entity type(s) (where needed), which hold the rules for UI.
For example in your entity type you have the field "Amount" and in some cases it should be read-only, while in some others - editable. So you need to add a field-control "UxFc_Amount", it should be integer type and contain 0, 1 or 2:
0 - means field should be fully hidden
1 - means field should be read-only
2 - means field should be editable
Then you bind appropriate properties of control, i.e. for Input control: "editable", "visible", "enabled".
For buttons you can introduce "action controls". Let's say you have a "header" object which is bound to the whole page and depending on user's role and the internal object state/status the "Submit" button should be available. So you introduce "UxAc_Submit" property which is a "boolean" (Edm.Boolean) and bind the "visible" property of the button to this variable, if it's false - the button will be hidden.
The same approach can be used for showing/hiding the whole sections on UI (for example when you use ObjectPageLayout control).

angularjs - set certain inputs with data to $pristine or untouched correctly

After researching i am still stuck on my predicament. I am using the latest version of foundation for apps with angular 'pre-embedded'.
I have a form which is used for both adding and editing data - lets say its for a job and it tracks employees days on the job. on load of the view the form is completely empty and contains two sections - the job details and the employees details.
first the user would have to enter and save the details in the job section (in order to create the id for the job so the employees can be linked to it) for the employees section to be activated. This works fine and is enabled by the job id being set to > 0 (-1 being default on load);
This all works fine so far, but i have a function in my controller to allow loading in an existing job record. when the user blurs on one of three fields the controller checks the data object for jobs matching these unique fields and loads (angular.copy) in the data in the scopes 'job' model. When this is loaded all form inputs are set and marked as dirty.
obviously my required behavior is that if the job details are loaded in by the system the form is not marked as dirty so as to allow me to know if the job details have been edited at any point after. the same is required of a new job that has been saved and given an id.
as i understand it the setPristine() function actually resets the form and model, similar to form[0].reset() but I may be wrong. I also suspect untouched may be a way to go?
also i should mention that the contains all sections to this view including the add employee inputs in the employee section.
I understand I can simply remove the ng-dirty class manually but have read this then does not update the angular way and will not identify further edits.
Is there a way i can functionally remove the ng-dirty from all child inputs of an element and not all in the form and without removing the loaded data too?
note: all inputs by default are linked (via ng-model) to their relevant models and data is loaded in the controller to the model.
It seems I've misunderstood pristine from the other posts, after further tests it is only the field that the unique data was entered into that is changed to dirty. I simply need to call setPristine on this after loading the existing record and then maybe loop through all elements within this section to test them. $setPristine does not clear the input as i read previously.

How to collect dynamic client-side data and pass it to server side

I need some direction on how to procede in this scenario. Using and Asp.Net page with JQuery, user generates dynamic elements representing data of his process' tasks:
-Basically, at the left, right and bottom of the page, there are several accordion with a sort of draggable items
-In the middle of the page, there is a 'PLUS' button
-Where user hits '+', a new 'CARD' is dynamically generated in the middle of the page. This card is a main div, with some droppable divs inside it
-This card represents the user task, and the inner divs are the properties of the current task
-The user drags the options from the lateral accordions and drops them on the droppable areas/div of the card/main div.
-Done! The 'task characterization' of the task is done.
-The process is repeated, adding more cards as required.
All this operation is client-side: until this moment, there is no needed to invoke server operations.
Until now, and this is where my question is laid: when the user is done, he hits a 'SAVE' button.
How can I go from a dynamic set of HTML controls on the client to, lets say, a IEnumerable of a custom class type containing the user data to proceed with data operations?
These are some of my ideas:
Idea #1:
1. On Page_Load, instantiate a list of 'TaskData'
2. When user hits Save, using Jquery, select all elements of the card class
3. Loop through all card
4. Select and loop all elements of the card, reading data of the droppable areas
5. Pass data to server (using webservice or page_methods)
Idea #2:
On Page_Load, instantiate a list of 'TaskData'
At each 'drop' event, call a specific page_method, eg: setPropertyX(string value), setPropertyY(string value), and so on, avoiding callbacks. This way, on the Save method, I would have the objects to be populated progressively.
Idea #3:
At each 'drop' event, store values on array variables
...
Idea #4:
Use browser' localstorage/sessionstorage, or browser DB (new area to me)
So, as you can see, I'm pretty stuck at this. Suggestions are welcome :-)

Allow user to save certain items in HTML list to later edit (Ruby on Rails)

I'm trying to wrap my head around how to accomplish the following in my Rails project.
I'm trying to create a reusable template that users can create, edit, and save to be used later. The process is as follows:
The user has a list of all possible things they could add into their template
With the list of everything, I have a check box next to each item. If the user selects the checkbox, I want to save that item into their template (not edit the actual value of the item yet though)
User selects multiple check boxes for the items they want, I then show them another page with a list of only the items they want included in their template. From there, they can edit the actual values and that data will be saved to my database.
Example:
Step 1:
Universe of Parameters:
Parameter 1 []
Parameter 2 []
Parameter 3 [x]
Parameter 4 [x]
Parameter 5 []
Step 2:
User "saves" the checked items, and sees the following only:
Parameter 3 (editable)
Parameter 4 (editable)
I'm not sure how to approach this. Is this an HTML solution? Is it JavaScript? Can I do it in Rails? Any help would be greatly appreciated
Everything will depend of where you want those data stored, if you want them on your database, you'll maybe use AJAX call to your Rails Controller, if you want them stored on your client browser, you both can use localstorage or cookies

Categories

Resources