Material Design - one search field, two available actions - material-design

Need a tip for design. Now we have a one search field, with 2 actions - where you can search for a role or a user
If you search for a user you can copy his (role) assignments OR
If you search for a role you can add the selected role.
Generally, UI looks now like this:
Copy user's assignments
Add role
How can this UI be simplified for the user?

I think you should add a menu to the Appbar, similar to the Menus section of the Material Design standard for Layout Structure:
The images above are pulled from the standard, but could be used in your case.
Ditch the radio buttons and present the current search context with its default placeholder text in the search field. Offer a button in the Appbar that presents a modal Menu.
When the menu is presented, offer the available search contexts to the user, allowing them to switch. Upon selection, re-render the search field with new placeholder text. It should probably clear anything that was previously entered.
If for some reason the set of contexts is limited to one (permissions, security, or another reason), present that option in the placeholder text and hide the menu button.

Related

Application layout combobox.SelectedValue for SearchBar

How can I get the value of SearchBar in Application Layout?
If I have more than one criteria to search (in application layout) how to get the current (selected) value of combobox near the SearchBar?
Have a look on the picture above.
The basic assumption behind the search bar with options is that you'll submit the search information to another XPage. For instance;
<xe:this.searchBar>
<xe:appSearchBar
pageName="/search1.xsp">
<xe:this.options>
<xe:basicLeafNode
label="People"
submitValue="people">
</xe:basicLeafNode>
<xe:basicLeafNode
label="Buildings"
submitValue="buildings">
</xe:basicLeafNode>
</xe:this.options>
</xe:appSearchBar>
</xe:this.searchBar>
Such a markup will create a combobox with two options. When the user submits the search string, it will navigate to /search1.xsp?search=SomeValue&option=buildings. Therefore, you will process those values inside the target page.
In such a case I guess you'll want to decide which view to be searched according to the search option. What I do is generally having a single XPage for search results and different custom controls for different views. You might use a switch or dynamic control component depending on the case. Alternatively, you can use the dynamic view panel component to switch between different views.
If you prefer different search pages for different search options (i.e. searchPeople.xsp and searchBuildings.xsp), you'll have two options. You can design an intermediate page to redirect the user to the desired page or you can create your own search box there. So you don't generally need to have the option value within the page.
BTW, that value is available at the Client-side JavaScript. That's a <select> element and its id is "the id of the application layout control" + "_searchopt". You can refer to the client-side object with dojo.byId("#{id:applicationLayout1}_searchopt").
Hope this helps.

Orchard CMS. Add sub items from edit screen

I'm trying to develop my first module in Orchard and stuck with the following problem.
I have Box content type that contain Books. What I want to achieve is to allow user to add books from box edit screen in admin. The process is the following:
User selects a Box in admin and click edit.
In edit screen a list of books is displayed with buttons "Edit", "Delete" and "Add Book"
The user clicks "Add Book" button and add book screen appears.
The user enters required metadata and clicks "Save"
The user is redirected back to Box edit screen with new book added to the list.
I'm looking for advise on what is the best way to implement this.
There are several ways to do that, most of which don't require building a module.
You could use the updated list feature in the new Orchard 1.8. That does pretty much exactly what you describe.
You could use taxonomies, where the boxes are terms (terms have their own content type that you can extend). The workflow is kinda backwards with this, where you put books in boxes rather than picking from the box which books belong.
You could use a content picker field configured for multiple items, and constrained to the book content type.
You could build your own module, with a relationship between your types, as explained here: http://docs.orchardproject.net/Documentation/Creating-1-n-and-n-n-relations but except if this is a pure learning experience, there's little reason to go for that one, as the other three above are so much simpler, and don't require any coding.

Dynamically add / remove editable area to custom control embedded in XPage

Okay... this is a little difficult to explain but I will try my best.
In Custom Control while adding properties in Property Definition we can set "Allow multiple instances" which allows us to add multiple instances of that property when the control is embedded in XPage.
Similarly, I need to know whether it is possible to add (and remove) Editable Areas in a custom control when it is embedded in XPage? What I plan is that I would have a repeat control inside my custom control and I would be able to put the contents in each editable area in every loop of that repeat.
Is this the right way to go about or am I looking at this problem incorrectly? Any solution not involving editable areas is also welcome :)
Update 4 Apr 2013:
A use case context I am looking for is a simple carousel where contents of each screen in carousel can have different contents. These contents would be put into each (dynamically added) editable area. The contents can be very different from each other with one screen containing only text, other only image and another both image and text.
Look at the table walker example in the 26 original exercises. It does mostly what you are looking for (conceptually). You won't need multiple editable areas. Whatever is inside the repeat gets repeated.
What you want to do is to give the control a custom property "boolean editMode" so you can render that one line to be edited - if that's the UI pattern you want to follow.
You also could consider a dojo table with Ajax which allows for a familiar spreadsheet UI

Can I create a custom DialogPreference based on a pre-existing custom Dialog?

In my Android project I've already created a custom dialog: A class named SelectColorDialog, extending Dialog, that allows the user to view a large matrix of color cells in order to select a particular color. The dialog returns the selected color value (as Integer) to the dialog initiator – typically an Activity – via a callback function.
I've a similar custom dialog, SelectTypefaceDialog, to allow easy font selection. A list of available typefaces are shown, as ListView rows, each identified by name and with an associated short sample text rendered in that typeface. The available typefaces include usual droid fonts, such as NORMAL, MONOSPACE, etc. as well as any externally sourced TTF font files that the user cares to load into a particular subdirectory on the SDCard.
These custom dialogs were not initially designed to be used directly in conjunction with SharedPreferences, preferences definition XML files or with any PreferenceActivity. Instead of, each dialog can be popped up from any activity, via the user pressing a button or via a menu item. The activity classes that create these dialogs also have internal callback classes, selection event listeners, to detect when the user selects a color or font.
These two dialogs do not have OK and Cancel buttons. Instead, the user just clicks on an item - a view of some kind - in the dialog to select the corresponding color or typeface value (implicit OK) or else presses the device’s back button to dismiss the dialog with no action taken (implicit Cancel).
I would now like to go further and incorporate these two custom dialogs into the shared preferences framework via a preferences.XML and an associated PreferenceActivity.
I would prefer to base two DialogPreference subclasses directly on these existing dialogs if possible, but I cannot see how to do so. I suspect that I cannot, and that I'll need to start all over again, and copy or adapt all the java code that is presently in the custom dialog classes – for color or font display and selection – directly into the custom DialogPreference classes instead, perhaps by overriding onCreateDialogView() and/or other methods?
This question may be a bit old, but I hope to help those, looking at the same problem in future: just extend Preference instead of DialogPreference. DialogPreference is designed badly and expected "official" way to use custom Dialog - overriding protected showDialog method does not work, because this single method contains half of class logic.

How to use custom logic to conditionally display a ribbon group in a grid view-like scenario in a supported fashion in CRM 2011?

I've modified the sitemap of a CRM 2011 solution to contain a new Area. That area contians a single Group and the Group contains a single SubArea.
The SubArea is defined with a URL attribute similar to this...
<SubArea Id="x" Url="/WebResources/new_/y.html"
<Titles>
<Title Title="z" LCID="1033" />
</Titles>
</SubArea>
When a user clicks on this subarea in the nav bar the y.html webresource loads in the content area of CRM as expected. It loads similar to how a grid view would load, but instead of the grid view, y.html is loaded.
In addition, a customized ribbon is loaded.
Currently this customized ribbon disables ribbon button groups based on the role of the current user. This is done using an EnableRule of the CommandDefinition in RibbonDiffXml. In the EnableRule a CustomRule is defined that references a javascript function that returns true or false based on some custom logic regarding the users role.
This is working well. However, I've been asked to remove the ribbon button groups instead of just hiding them.
My understanding is that this is more of a task for a DisplayRule than an enable rule. However, from what I gather DisplayRule does not have a CustomRule option as EnableRule does.
After gathering that DisplayRule isn't an option, I thought that I might be able to write some javascript in the Enable rule to remove the group (as well as return a value to enable it or not). However, after debugging the javascript, I see that although I have access to Xrm.Page, I do not have access to Xrm.Page.ui (similar to the expected result for a grid view). Therefore, I can't disable the tab here either (without resorting to unsupported javascript).
How can I use custom logic to conditionally display a ribbon group in a grid view-like scenario in a supported fashion (e.g. no jQuery/ect)?
Currently this customized ribbon disables ribbon button groups based on the role of the current user...
I assume then that you basically wish to toggle ribbon functionality, based on user's permissions.
DisplayRule does not have a CustomRule option as EnableRule does...
Correct
DisplayRule isn't an option
Not sure that this is necessarily true. While DisplayRule may not have a CustomRule option, it does have a MiscellaneousPrivilegeRule.
Depending on the configuration of your roles and your requirements, you may be able to bypass looking at the users "role" and instead set up a rule that effectively checks: if the user can read the invoice entity, show this button (group) (obviously this is just an example - you get the idea)...
If your roles are more complex you could create a pseudo-entity (e.g. called "CanViewMySpecialButtons"), remove it from anywhere in the UI and only grant read permissions to the roles that should view your buttons. You can then create a MiscellaneousPrivilegeRule that checks if the user can read your pseudo-entity - only those users in your role are able to see that entity therefore the button can be set hidden for all other users.

Resources