In Settings app, we have two different concepts – one is Dialog while the other one is Panel. The main difference between them is how they are presented. From UX spec, if we need users to do some actions and then submit, normally they will be presented with Dialog with cancel and submit button. While for Panel, it is just a simple view that focuses on presenting data and basically you can notice that there is always a “<“ backward arrow in the header that can help you navigate back to previous panel.
Wifi Auth Dialog
Wifi Panel
If you are going to create a dialog, here comes some notes that you need to be aware of at first. Let’s use Wifi Auth Dialog for example :
[Setup]
- You have to register one section element in Setting’s index.html.
- <section is=”wifi-auth” role=”region” id=”wifi-auth” class=”dialog”></section>
- remember, you need to add one extra dialog class to make sure the section can be applied with right CSS style
- Remember to add one more link element in index.html to make sure related sub-document will be loaded.
- <link rel=”import” href=”/elements/wifi_auth.html”>
- And then, you can follow scripts under settings/js/panels/* to make sure all dialog needed codes can be loaded.
Take settings/js/panels/wifi_auth/panel.js for example, for Dialog, there are some special API you can use and something that you need to know.
- In order to pass data back to caller, you can use onCancel and onSubmit function with resolved data. By doing so, caller can use DialogService.show(‘panelId’).then(function(result) {}); to get needed data.
- And also, if you want to programmatically cancel or submit, after Bug 1166495 is landed, you can use this.cancel() and this.submit() to achieve this.
For Panel, you can follow [Setup] part above without adding extra class and everything is done ! Based on our design, they share the same interface and there is no much difference between them, just make sure you won’t use onSubmit(), onCancel() and Dialog related API described above, then you are good !
