![]() ![]() For example, if you select an item in the master, the details could display in the pane next to the Master pane, or in a pop-up, or you could drill down more pages. Interactions: This is about the interactions between the items in the master and their details.Details pane: This area shows the details of the particular item that you select in the Master area.Master pane: As explained earlier, this area contains a list of items.The Master-Detail UI design has the following key elements. This style is suited for smaller screen space. It might feel that the master and details pane are separate pages, but they are not. You can select the item from the master list and drill down to the details pane. Stacked: In this style, either the master or the details pane is visible at one time.Master-Detail UI design is mostly of two types: You need to switch between items frequently and want to edit or delete them but still want to stay in the same context.You think that the data is complex enough to fall in the category of list and details scenario.You should use this particular UI design when: You would find master-detail pattern used in web e-mails, online ticketing applications, web or mobile chat applications, many more. Therefore, you see each master record having many relationships, and the Master-Detail UI is just the right design to present such data. ![]() In the Master area of the application, there could be employee names.įor each employee, you could see employee id, organization information, and personal details, and so on. For example, you may use an application that shows employee records. The item that you have in master has many relationships in the details area. Master-detail design also represents one-to-many relationships for your data. Do not confuse a master-detail design with web page navigation. If you click an item in the master, you can see the details on the same web page. Note in a web application, the master and detail view exists in a single page. When you click the item in the master list, then you can see the details of the item in the detail view. The master view displays a master list of items. A Master-detail design is a type of UI design that has a master view and a detail view. You already got a basic idea of what is a Master-detail design pattern. The intention of this post is to understand the basics of Master-Detail design at a high-level using some real-world examples. However, you can implement this design for enterprise applications too, but for the sake of keeping the scope focused, I will restrict the post to web applications only. In this post, I will discuss the Master-Detail detail design pattern strictly from the perspective of web applications. Here, the list of e-mail messages are the examples of Master and their corresponding messages as Detail. In your e-mail message, you can do any action that you require and switch back to the area listing all e-mail messages. You can click each of these messages, and you can read the message details next to your message header. For example, if you use Microsoft Outlook, you can see the list of your e-mail messages in one area. Every one of us uses some e-mail client or the other. Now let us consider a real-world example. A basic old world example of Master-Detail UI! In short, alphabets are master entities, and each of the alphabets has related details. If you observe, in this table, the alphabets are the list of items and their corresponding details are the name, place, animal, and thing. You must be wondering how this game is related to today’s post on the Master-Detail UI Pattern.įor the uninitiated, a master-detail UI pattern is a design interface mainly used to present the list of items and their details. I guess if you also played this game, you would have recalled it by now. Everyone had a paper where they would scribble, and the result would look something like a table. It involved a few players where they had to write a Name, Place, Animal, and Thing starting from a particular alphabet. modal: show" doesn't appear in the console.Īttached is a HTML file demonstrating the expected behaviour.As a child, I remember playing a game called Name, Place, Animal, Thing. On loading the Book, the "Loaded test.js" message appears in the console clicking "Launch demo modal" shows the dialog, but "Event on. ![]() Modify Clean theme's lib.php and config.php, adding $page->requires->jquery(), and $THEME->javascripts_footer = array('test') - respectively.Test Book content (from the Bootstrap docs):.'show', to trigger lazy-loading images) don't seem to be getting fired. It basically works, but Modal's events (e.g. I'm starting to use Bootstrap's Modal dialog in Book content, on master for in-page popups. (It's possible that this should go in the Themes forum, but given the end of YUI, I thought it might be better in General.) ![]()
0 Comments
Leave a Reply. |