Pattern GUI per modificare i dati con una relazione molti-a-molti

Question

Mi imbatto spesso in una situazione in cui ho bisogno di trovare una GUI per modificare i dati che hanno una relazione n: m. Sto cercando idee per la GUI user friendly.

[table1]
   |
  /|\
[table2]
  \|/
   |
[table3]

Di solito la GUI è simile a questa:

---

Griglia che mostra tutti gli elementi della tabella1

Aggiungi elemento table3 ... _{(mostra la finestra modale con gli elementi table3)}

---

Griglia che mostra tutti gli elementi della tabella3

---

Dopo che l'utente ha scelto un elemento table3, aggiungo una nuova riga a table2 e aggiorno le griglie.

Svantaggi:

• Puoi aggiungere solo gli elementi table3 a table1 e non viceversa;
• Puoi solo sfogliare gli articoli table1 e vedere gli articoli table3 correlati;
• Devo avere una griglia filtrata di elementi table3 e una simile per selezionare nuovi elementi;

La mia domanda:

Qualcuno conosce un modo migliore per sfogliare e modificare visivamente i dati che hanno una relazione n: m? O qualsiasi modello carino che potrei "rubare" da pacchetti software esistenti?

Answer 1

Soluzione 1

Se i set di dati non sono troppo grandi, utilizzare una tabella e consentire agli utenti di effettuare controlli nelle celle (la tabella 1 è l'asse X e la tabella3 è l'asse Y).

Probabilmente puoi farlo per set di dati table1 / 3 più grandi purché permetti agli utenti di filtrare o limitare in altro modo quali valori vengono visualizzati sugli assi xey.

Soluzione 2

Per citare da questa pagina , " Una relazione molti-a-molti è in realtà due relazioni uno-a-molti con una tabella junction / link " ;.

Come tale, puoi, come unica soluzione, semplicemente prendere la tua soluzione e risolvere i tuoi primi 2 svantaggi avendo schermate / finestre di dialogo per andare alla tabella 1 = > 3 e 3 = > 1.

Non è una soluzione perfetta ma almeno offre tutte le funzionalità necessarie

Soluzione 3

Un po 'simile alla tua soluzione:

1. Mostra una tabella basata su table1, con:

   B. col1 contenente gli elementi table1

   C. col2 contenente un elenco di tutti gli elementi da table3 già associati a questo elemento da table1.

   L'elenco può essere orizzontale se di solito sono associati pochi elementi o verticale (scorrevole) se orizzontale a troppo largo.

   La parte importante è che ogni elemento visualizzato da table3 ha un " delete " icona (x) accanto ad essa per consentire la rimozione rapida.

2. Consentire di scegliere a quale elemento della tabella1 si desidera aggiungere i mapping.

   Esistono 2 modi per farlo: aggiungere una casella di controllo a ogni riga della tabella e disporre di un pulsante con l'etichetta "aggiungi relazioni alle righe selezionate"; (la formulazione deve essere migliorata), o semplicemente avere una terza colonna nella tabella, contenente pulsante / collegamento per aggiungere relazioni a quella singola riga.

   Il primo è una buona idea se è probabile che l'utente aggiunga spesso esattamente lo stesso set di elementi da table3 a diverse righe da table1.

3. Quando " Aggiungi " si fa clic sul pulsante / collegamento, si visualizza un elenco di elementi di selezione multipla selezionabile dalla tabella 3, con " aggiungi selezionati " pulsante.

4. Come nella tua soluzione (vedi il mio # 2), questo è simmetrico, quindi dovresti implementare un'interfaccia utente mirror per il mapping da table3 a table1 se necessario.

Answer 2

Questa è una vecchia domanda, ma dato che ho affrontato di nuovo lo stesso problema proprio ora, ho pensato a questo:

1. 2 griglie, affiancate, che mostrano gli elementi table1 e table3, con paging, se necessario.
2. Entrambe le griglie hanno una barra degli strumenti superiore che consente di filtrare per un valore dalla tabella opposta. A seconda dei tuoi dati e del tuo framework gui, può essere una griglia combinata a discesa o un input di testo con completamento automatico.
3. Entrambe le griglie hanno caselle di controllo (ultima o prima colonna)
4. Entrambe le griglie contengono un pulsante / azione inline su ciascuna riga, per filtrare automaticamente l'altra griglia su quell'elemento.
5. Viene mostrata / contrassegnata una sola griglia come " attivo " o " master " in qualsiasi momento (per chiarire all'utente, da quale parte della relazione stanno visualizzando / controllando).

Quando selezioni un elemento in grid1, grid1 diventa attivo e tutti gli elementi nell'altra griglia sono spuntati se sono associati all'elemento selezionato.

Viceversa, quando selezioni un elemento in grid2 (tabella3), grid2 diventa attivo, tutte le caselle in grid2 sono vuote (o in grigio) e le caselle in grid1 indicano un'associazione con l'elemento selezionato.

La parte di filtro è semplificata in base al pulsante incorporato descritto al passaggio 4.

Credo che questa soluzione soddisfi tutti i tuoi requisiti.

Answer 3

Ecco una possibile soluzione, data sotto forma di una relazione m: m tra dipendenti e progetti. Ogni dipendente può lavorare su molti progetti, ogni progetto può coinvolgere molti dipendenti.

Da sinistra a destra, mostri quanto segue:

Un pannello che mostra i dettagli dell'impiegato attualmente selezionato.

Un elenco di tutti i dipendenti, in cui ogni elemento nell'elenco mostra il nome del dipendente come collegamento o pulsante selezionabile (per visualizzare i dettagli nel pannello dei dettagli). Alla fine dell'elenco è presente un pulsante di attivazione che filtra l'elenco dei progetti solo per quelli associati al dipendente attualmente selezionato. In fondo all'elenco è presente un pulsante per aggiungere un nuovo dipendente, che visualizza un pannello di dettagli vuoto pronto ad accettare l'input.

Uno spazio verticale nel mezzo con un singolo "Link" pulsante che consente all'utente di collegare l'impiegato attualmente selezionato al progetto attualmente selezionato. Facendo clic su questo pulsante si aprirà una finestra di dialogo che consente all'utente di inserire i dettagli del collegamento (ad es. Per quanto tempo viene assegnato il dipendente, quale ruolo svolgerà il dipendente, ecc.)

Un elenco di tutti i progetti, in cui ciascun elemento dell'elenco mostra il nome del progetto come collegamento o pulsante selezionabile (per visualizzare i dettagli nel pannello dei dettagli). In cima all'elenco c'è un pulsante di attivazione / disattivazione che filtra l'elenco dei dipendenti solo a quelli associati al progetto attualmente selezionato. In fondo all'elenco c'è un pulsante per aggiungere un nuovo progetto, che mostra un pannello di dettagli vuoto pronto ad accettare l'input.

Un pannello che mostra i dettagli del progetto attualmente selezionato.

Ovviamente, dovresti limitare le dimensioni dei pannelli dei dettagli, magari mostrando solo i dettagli rilevanti per la relazione m: m. Potresti anche aggiungere un pulsante nel pannello dei dettagli per aprire una finestra pop-up più dettagliata, oppure potresti eliminare del tutto il pannello dei dettagli, se sei principalmente interessato a gestire i collegamenti. Questa interfaccia utente funzionerebbe davvero bene su schermi ad ampio schermo.

HTH! Klay

Answer 4

Fammi usare l'esempio di relazione Un cliente ha 0 o più ordini. Se l'utente desidera visualizzare gli ordini di un determinato modulo, suggerirei il seguente caso d'uso:

1. L'utente fa clic sul collegamento Cerca cliente:
2. Il sistema presenta il modulo di ricerca clienti con i criteri di ricerca su cui filtrare
3. L'utente riempie i criteri di ricerca e preme il pulsante Cerca
4. Il sistema presenta un elenco del cliente ... in base ai criteri corrispondenti
5. L'utente preme il pulsante Apri di fronte a Un cliente
6. Il sistema presenta il cliente (in una pagina completamente nuova con " pulsante Torna alla ricerca ")

La nuova Pagina ha 3 pannelli: 1 pannello per i dettagli del cliente, secondo pannello per l'elenco degli ordini e 3 pannelli che vengono popolati quando si fa clic su un ordine. Se il numero di ordini è maggiore di 20, inserirò un link Cerca ordini che guida a un modulo di ricerca completamente nuovo per gli ordini con un ID cliente predefinito corretto con l'ID cliente corrente selezionato.