locked
Hide SettingsFlyout

    Question

  • I am using the Settings FlyOut for editing some data.  I want to have a Save button that will save the entered data then close the settings flyout.  Is this the right way to do this?

    How do I close the flyout?

    I am showing the flyout programmatically using this method:

    WinJS.UI.SettingsFlyout.showSettings("settingsDiv", "/html/edit.html");

    Is this a good use of the SettingsFlyout?  If not, what is another UX that I can use to edit an an item from a list without going to another page?


    www.emadibrahim.com

    Sunday, May 13, 2012 11:10 PM

Answers

  • You can do it as Method 1 if it will be obvious to the user that tapping it will cause some action.  I suppose it depends on whether the main purpose of the page is to view tasks or to edit them.

    The deal with Metro is that it is all about 'content' and not 'chrome'.  So you always want to show your content and hide the buttons and other widgets unless they are required to use the page.  Metro users will become accustom to going to the app bar to find controls that interact with the page.

    It is your choice, though.


    • Edited by jrboddie Tuesday, May 15, 2012 3:08 PM
    • Marked as answer by Emad Tuesday, May 15, 2012 3:46 PM
    Tuesday, May 15, 2012 3:06 PM

All replies

  • Unless the data you are editing is really a 'setting', you should use a flyout from the App Bar.

    See this page for examples and guidelines.

    Monday, May 14, 2012 12:52 AM
  • Let's say I have a list of tasks on the screen and I want to tap on a task and edit but since the task is only made up of 3 or 4 fields, it makes no sense to navigate to another page just to edit, I want to edit right there and then using some sort of a popup or flyout...  What is a good way to do that?

    www.emadibrahim.com

    Monday, May 14, 2012 12:58 AM
  • You could select the task then open the app bar which would have a button for 'Edit Task'.  Clicking it, would bring up a flyout.  The flyout would have a save button which would dismiss (hide) the flyout and the app bar.

    An alternative, would be to have an 'edit' button next to each item.  Clicking it would bring up a flyout. But this would not be the 'Metro' way of doing things.

    The app bar is for commands that are used in your application.  Settings is for more global things that don't change very often (if at all).

    Monday, May 14, 2012 1:16 AM
  • Ok... that's not a bad idea, another question is: how do I create a flyout similar to MessageWindows.UI.Popups.MessageDialog in the framework but with my own custom view?  Is it just a matter of styling it?  Do you know if there is an example or sample style out there to do that?

    www.emadibrahim.com

    Monday, May 14, 2012 1:06 PM
  • Yes,  Create the MessageDialog and then use the DOM explorer in VS to see what styling is applied.

    Jeff Sanders (MSFT)

    Monday, May 14, 2012 1:09 PM
    Moderator
  • The DOM Explorer can't see the MessageDialog - I guess it is not part of the DOM or it is some internal OS function...  Do you know what the style is or can you get it for me?

    www.emadibrahim.com

    Monday, May 14, 2012 10:32 PM
  • Hi Emad,

    That's right... Sorry I forgot it was a system generated thing.

    The style will be the same as the app so you can put up a <div> of the appropriate height and 100% width.   Then the text will pick up the proper font.  Simply color the button that color and you will have something very close.  You will also need to put this on top of a div that will grab any mouse clicks and not bubble them and cancel them.

    Using the dialog as an input mechanism will be strange however and your app will feel very different from the other Metro apps.  I would suggest you do not do this.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, May 15, 2012 12:47 PM
    Moderator
  • You are right, the UX will be a strange...  I am still not very clear on what is the best "metro" way to do this.  I have downloaded all the apps in the app store and almost all of the apps are read-only apps, so I couldn't find a good example of an "edit" screen or "edit" user experience...  Imagine you have a list of tasks and when tapping on a task you want to show the view/edit detail screen.  I don't want to go to another screen.  I don't want to have a preview window like email (not enough data.  I want some sort of "pop up", that is why I was looking into the settings flyout and the message dialog which so far don't seem like a good idea.

    Do you have any guidance or suggestions or wireframes or screenshots?

    Thanks a lot for all your help.  It has been slow and frustrating and without this forum, it would be impossible..


    www.emadibrahim.com

    Tuesday, May 15, 2012 2:30 PM
  • Use a simple flyout.  Launch it from a button in the app bar.

    Tuesday, May 15, 2012 2:41 PM
  • Good... That's kind of the conclusion we came up with...

    Now the million dollar question...  why launch it from the appbar???  why not just show the flyout as soon as they tap the task?  i noticed that this is mentioned in many metro docs but i feel like, why the extra click/tap...

    Method 1

    1 - tap task

    2 - show flyout

    Method 2

    1 - tap task

    2 - show app bar

    3 - tap button

    4 - show flyout


    www.emadibrahim.com

    Tuesday, May 15, 2012 2:47 PM
  • You can do it as Method 1 if it will be obvious to the user that tapping it will cause some action.  I suppose it depends on whether the main purpose of the page is to view tasks or to edit them.

    The deal with Metro is that it is all about 'content' and not 'chrome'.  So you always want to show your content and hide the buttons and other widgets unless they are required to use the page.  Metro users will become accustom to going to the app bar to find controls that interact with the page.

    It is your choice, though.


    • Edited by jrboddie Tuesday, May 15, 2012 3:08 PM
    • Marked as answer by Emad Tuesday, May 15, 2012 3:46 PM
    Tuesday, May 15, 2012 3:06 PM