What XAML design strategy for master/detail views LOB apps - xaml

I would like to present the user a grid with sales order lines. In this grid the user can enter an amount on each line to ship. When a Save button is pressed, all the modified lines will be processed.
+---+------------+---------+---------+--------+------------------+
| # | PartNumber | Ordered | Shipped | Descr. | Quantity to ship |
+---+------------+---------+---------+--------+------------------+
| 1 | A12356 | 10 | 5 | Wheel | [ input field ] |
+---+------------+---------+---------+--------+------------------+
| 2 | B54556 | 10 | 0 | Frame | [ input field ] |
+---+------------+---------+---------+--------+------------------+
[PROCESS BUTTON]
So the idea is the user can enter the amount to ship for multiple lines in one go and hit Process
So far so good.
What I'd like to achieve, is that the user is able to click the cells in this grid.
Click on PartNumber: A generic content element with part details will open
Click on ShippedQty: A generic content element will open with previous shipments.
etc.
I would like to re-use these generic content elements throughout my application.
(There are many different tables in which a user can click a PartNumber)
While viewing for instance the details of a PartNumber, the already modified input fields, scroll position, etc, have to remain intact in the master view (the table presented above).
My Question:
What would be the appropriate design strategy for this?
In WinForm's I'd just open a new dialog with the details. This doesn't seem appropriate for UWP.
So far I thought of the following alternatives:
SplitView with two panes: (1:Master) a sales order line Page and (2:Detail) a details Page which content is (re)set depending in which column the user clicks.
Pro: Can use Frame.Navigate() within details view.
ContentPresenter for which content is (re)set depending on whether the user clicks the PartNumber or Shipped Qty, etc.
ContentDialog or ModalDialog for the details content element.
This doesn't seem to be the way ContentDialog is meant to be used. Only one ContentDialog can be open at any time and ContentDialog is by default dynamically sized depending on the UI elements within.
Are there any options I'm missing?

"This doesn't seem appropriate for UWP."
I don't see why it would not be. You have lots of options so its really more about how you want your UI to flow than about what framework you are using. My experience is with WPF... use as applicable.
As mentioned it really depends on how you want your UI to look and how much work you want to put into it.
In my case I wanted my components (part details screen, previous shipments screen) to be completely independent of the host page and to not interfere with navigation. Using a modal dialog window was a good choice for me (but certainly not the only choice).
In my apps I add a class library called Components that is part of the presentation layer. I create components I call selectors (CustomerSelector, PartSelector, OrderSelector...) that can be used throughout my app. A selector is basically a window that is opened in a modal state. It displays a search grid and sets a property on the selector to an object or collection of objects or null if the user cancels.
// this handles a button click event
public async void SelectSeriesCommandHandler(object sender, ExecutedRoutedEventArgs e)
{
SeriesSelector selector = new SeriesSelector(true, WatchListSeries);
bool? result = selector.ShowDialog(); // grid with search options is displayed in modal dialog window
if (result.HasValue && result.Value)
{
var series = selector.SelectedSeries; // use selected objects
}
}

Related

Accessibility for blind people

How does the aria-current works as we need to tell the screen reader where the page it is even after user does not made any movement on the laptop. Which Aria can be used ?
Aria-current works by informing the screen reader which element is current. For example, you can use aria-current="page" on a list of navigation links where it shows by visual decoration (color or underline, etc) which page link is currently chosen. Aria-current="step" could be used if there is a visual indication of checkout steps (for example) to show which step (2 of 3) the user is currently on. Aria-current="true" could be used if there are a set of size links to show which size is currently selected.
aria-current is one of the attributes defined in the WAI-ARIA specification, meant to help people with disabilities to perceive common UI widgets that are not part of the HTML specification.
It should be used to identify the current item in a set of items and it can take several values:
aria-current="page": indicates the current page within a set of pagination. It can be used, for example, within a main pagination widget (likely in the header).
aria-current="location": indicates the current page within an hierarchy of navigation. In can be used, for example, within a breadcrumb widget.
aria-current="date": indicates the current date. It can be used, for exemple, within a date picker.
aria-current="step": indicates the current step within a set of steps. It can be used, for exemple, within multi-step wizard form.

How do I add/remove density colors on the Windows Universal App CalendarView control after loading?

CalendarViewDayItemChanging seems to be the way to add 'density colors' (coloured bars in a DayItem box) to a Windows Universal App CalendarView.
However CalendarViewDayItemChanging is only fired when the DayItem box is loaded i.e. on initial loading and possibly when navigating to a far enough date and back again such that the virtualisation re-loads the DayItem.
However when I create an appointment on the selected date I need to add a density color bar immediately, similarly if I remove an appointment, I need to remove that bar.
How do I get the control to reload or re-render that particular DayItem?
Notes:
There is only the SelectedDates available as a property
There is no obvious way to ge the DayItem collection
Setting the Visibility to Collapsed then Visible instantaneously does not trigger a reload.
There was a similar issue on the MSDN blogs here: https://social.msdn.microsoft.com/Forums/en-US/54c81ada-4147-474b-8425-524ec69bc749/uwp-calendarview?forum=wpdevelop
I think your best bet currently is to have your Appointment creation on a separate page and store a List of Appointments locally or in a db. That way when you navigate back to the Page with your calendar view you can reload the Calendar using the updated Appointment list.
I used the MyCalendarView.UpdateLayout method to force the control to hit the CalendarViewDayItemChanging event again.
I called the method from the DataContextChanged event on my UserControl. This way anytime I change the DataContext the density colors get updated. This is sufficient for my needs. It sounds like you want to do it on a different event.
private void UserControl_DataContextChanged(Windows.UI.Xaml.FrameworkElement sender, Windows.UI.Xaml.DataContextChangedEventArgs args)
{
if (this.DataContext is ObservableCollection<Event>)
{
eventCalendar.UpdateLayout();
}
}

ListView with backward forward navigation and limited elements

In Sencha, how to create a DataView or List component which renders only 1 item at a time and contains prev/next buttons to navigate data?
Store has pagination enabled to pull only 5 records at a time. Out of these 5 records I want to display only 1 record at a time on the view and with navigation buttons to move forward/backwards. Is there a built-in component for this requirement?
I see few SO posts (Sencha Touch limit number of items in list) suggesting to use 2 stores (DisplayStore to slice the actual data). This didn't work for me. I tested this with static data in the actual store. It still renders all the data in the list. Moreover I am looking for forward/backward navigation buttons too.
If there is no such built-in component (at least close enough), I want to create one for my needs. Please suggest.
You should go with a filter, and two buttons.
The handler for the next button could be alike
var number= list.getStore().first().getId()
list.filter('id', number+1)
If there is anyway to increase a number for the next valid item. Otherwise you need a counter of your current selected item and increase that.

Dynamic Navigation in a XAML Windows Store App

I’m just looking for a sanity check before I go down this road with my Windows Store App.
In the app, I am looking to have a navigation model which involves the following:
All users shown the initial page, and are asked to make a section of Items from a list before tapping continue.
Each Item has a group of pages associated with it – could be 2,3, whatever.
The user is then presented the pages in the order that they are associated with for each Item and in the order by which they selected the Items.
For example, say the user selects Items 2 & 3.
Item 2 has PageA, PageB, PageC associated with it
Item 3 has PageB, PageD, PageA associated with it.
The user journey for the App would be
Selection -> PageA -> PageB -> PageC -> PageB -> PageD -> PageA -> End
The approach I am thinking of going with involves a “UserService” which is persistent throughout the app and stores a list of the Items the user has selected (in order)
I would then have a “PagePlayer” page which would act as a container for the pages to be displayed and this would be loaded after the user is finished with the Selection.
The player would then display all the pages in order based on the Items that were saved in the UserService.
I personally don’t want to go down this road because I know that having Frames displaying Pages etc is generally a bad idea, it could ruin the navigation history etc.
Which pages are associated with each item I would have saved to a local file of some sort and have this loaded when a new Item is set to be displayed.
The number of items are “hard coded” and have IDs associated with them.
I am familiar with Prism for WPF but unfortunately the recently released Prism for Windows Runtime does not support modularity for using a composite approach.
Apologies for general-ness of this question, I couldn’t think of another way of asking it.
Any help would be greatly appreciated!

Custom process bar in Rails 3

I need to implement a custom process bar (not progress bar) to map progress through a multi-step client project sequence. It has to be graphical, not just a breadcrumb trail, similar to this:
--- O --- O --- O --- O --- O
label label label label label
Each 0 above represents the graphical button that will be have separate states, :hover and :active and be a link to each page of the process so that the client can skip around and not have to follow a linear process.
The projects controller should handle the page views, with the first on being handled by a static page controller '/start_project'. This is due to the need for the client to accept terms and conditions on the /start_project page before they actually create a record in the database.
I need to know if there is a way to implement a process bar like this in Rails 3, with each step along the way reacting to its individual state. For instance, the first step, INTRO, should map to the /projects/new_intro.html.erb page dynamically. Each page will have a form_for element that fills in another part of the database.
I want a dynamic solution to avoid having to develop 11 individual graphics.
Any ideas?
After some research, I discovered that what I am implementing is a multi-step form map. There are several resources out there, including screencasts that show how to implement multi-step forms natively, or there is the wicked gem which does the same thing.
I am going to try to implement a native method first because I want to have the information saved to the database at the completion of each step, not just at the end of the form. This should allow me to implement the requirements of having both a [save] button and a [continue] button, the first which saves information but allows for continued editing, and the second which saves the information and moves the user to the next step of the form.