I think the main area to look in is dialog.js, which handles rendering the form dialogs.
One possible approach: - Edit the dialog.js -> ‘createForm’ widget function, find the each loop where the fields are iterated - Here, you can check for a new type param of your choosing (such as field.type === ‘tagger’). The ‘type’ is determined by a bunch of if-else statements -- nothing fancy ☺ - If the field matches this type, there is already a ‘tagger’ widget that you can use to render a comma-delimited tag list. You can see the code in ui/widgets/tagger.js for how it can be implemented. It uses the jQuery widget model, like the rest of the CS UI components. - You’ll probably have to tweak the CSS styles to fit the tagger widget into the dialog properly (since right now it is only used in some detail views). - Edit createForm’s ‘complete’ function, which is triggered after pressing OK and before passing the data to whatever action needs it. Here, you can parse the tag fields and append stuff to the ‘data’ object, which contains the other serialized form data. The ‘data’ object will finally be passed to the action’s API calls. - You can then add more fields to the existing dialog(s), and edit their AJAX calls to read your new tag-type fields. Hope that helps. -Brian From: Mike Tutkowski [mailto:mike.tutkow...@solidfire.com] Sent: Monday, July 28, 2014 6:49 PM To: dev@cloudstack.apache.org Cc: Brian Federle; Jessica Wang; Alena Prokharchyk; Seif Eddine Jemli Subject: Re: [ACS4.5] GUI Question Just to add a bit more detail: Seif is looking to create a new dialog that can utilize this control. One could access this new dialog - perhaps - by clicking on a new button to the right of the Storage Tags text field (ex. in the Add Primary Storage dialog). This new dialog would utilize the new control to show the admin all existing storage tags, allow for tags to be selected, and provide hints when a user types in a new tag. When this dialog is OKed, the storage tags can be listed in a comma-separated fashion in the, say, Add Primary Storage dialog. This way the admin doesn't have to guess at storage tags when entering them in a manual fashion. On Mon, Jul 28, 2014 at 7:43 PM, Mike Tutkowski <mike.tutkow...@solidfire.com<mailto:mike.tutkow...@solidfire.com>> wrote: Hi, My student for GSoC, Seif, was interested in adding this control to CloudStack's GUI codebase: http://loopj.com/jquery-tokeninput/ He's already written a new API command that retrieves a list of storage tags (in addition to other work for GSoC). Ideally he would be able to augment a couple dialogs that use storage tags to make use of this control so that admins could more easily input storage tags (ex. they could see existing storage tags in a list and be assisted by suggestions when typing in a storage tag). Would anyone (I've CCed some people who often work on the CS GUI) be able to provide Seif insight into where he should start with this task? It might make sense for him to extend this control and then utilize this extension in multiple places in the GUI. It would be great if he had a bit of guidance with regards to how this might fit into the existing CS GUI architecture. Thanks! -- Mike Tutkowski Senior CloudStack Developer, SolidFire Inc. e: mike.tutkow...@solidfire.com<mailto:mike.tutkow...@solidfire.com> o: 303.746.7302<tel:303.746.7302> Advancing the way the world uses the cloud<http://solidfire.com/solution/overview/?video=play>™ -- Mike Tutkowski Senior CloudStack Developer, SolidFire Inc. e: mike.tutkow...@solidfire.com<mailto:mike.tutkow...@solidfire.com> o: 303.746.7302 Advancing the way the world uses the cloud<http://solidfire.com/solution/overview/?video=play>™
