Using the treeview widget in a sidebar, how can I display info in the context when an item is clicked?

1
In the Demo project, this is done through a form loader, whch does not exist anymore. I like to create an explorer like navigation, just like in the Mendix modeler when you (double) click an item in the tree, the corresponding page, microflow etc. opens in the central region.
asked
2 answers
3

You can you set an action in the 4) Actions property. In the settings tick 'Fire on Selection Change'

Let the central region depend on an association. Change that association with the mf.

Note: the option 5) Selection Reference should do something like this, but did not work for me.

EDIT: Sorry for not being clear. Make the whole form something a dataview 'Placeholder'. Placeholder has an association 'Placeholder_CurrentAcademy' to Academy. The content / right panel is a dataview over assocation to acadamy. If the selection in the tree changes and the mf if called change the association 'Placeholder_CurrentAcademy' and refresh the Placeholder.

answered
1

Treeview inregelen voor recursieve boom

Appstore

Download de “TreeView en GridView” app uit de appstore. Versie gebruikt in dit voorbeeld is 5.1.1. van 4-9-2014.

Domeinmodel

  • Zaaktype: het voorbeeld gaat uit van een recursief object (Zaaktype). De recursieve relatie is N:M
  • ZaaktypeContext: In de documentatie van Mendix staat dat de treeview minimaal een bovenliggend (context) object nodig heeft om goed te werken. Dat is niet perse zo, maar het ZaaktypeContext object is wel nodig als je details van een node in de boom in eenzelfde scherm wil tonen. Voor deze functie is de 1:1 hulp-relatie “ZaaktypeContext_CurrentZaaktype” toegevoegd in het model.

NB: de widget ondersteunt alleen recursieve relaties waarvan de navigatrierichting 1 kant op loopt!

Schermstructuur

Het voorbeeld gaat uit van de volgende schermstructuur:

  • Een Zaaktypen overviewscherm wordt vanuit het menu aangeroepen.
  • Het Zaaktypen overviewscherm roept het Zaaktype_Tree scherm aan middels een microflow.
  • Het Zaaktype_Tree scherm met de Treeview widget.

Scherm "Zaaktype_Tree" (met de boomstructuur)

In het scherm is Zaaktype de 'caller of the page". Binnen deze dataview bevindt zich een tweekoloms tabel: - kolom 1: bevat de treeview widget - kolom 2: bevat een dataview op ZaaktypeContext via de relatie Zaaktype -(*)------(1)-> ZaaktypeContext Binnen deze dataview zit een tweede dataview op Zaaktype via de hulprelatie Zaaktype -(1)------(1)-> Zaaktype.

Treeview widget instellen

De Treeview widget instellingen bestaat uit drie tabbladen die elk weer de nodige elementen en instellingen bevat. In dit voorbeeld worden alleen de instellingen genoemd die nodig zijn om vanuit een Treeview: - de details van een tree-node te tonen - de tree node te kunnen aanmaken - de tree-node via drag-and-drop in de boom te verplaatsen

Tabblad 1: Tree configuration Dit tabblad bestaat uit 4 secties:

Sectie: Entities

In deze sectie worden alle entiteiten die in de treeview als nodes moeten voorkomen gedefinieerd. In ons voorbeeld: Zaaktype. NB: ZaaktypeContext is niet nodig, die komt niet voor in de treestructuur maar is alleen nodig als hulpentiteit om details te kunnen tonen.

In deze sectie hoef je verder niets in te vullen.

Sectie: Relations

Deze sectie definieert via welke parent-child relaties de nodes gevonden kunnen worden. Omdat de N:M recursieve tree maar 1 kant op kan navigeren en in het voorbeeld er voor gekozen is dat je bij een child de parents opgeeft gelden de onderstaande attribuutwaarden (in verschillende tabbladen te vinden).

Attributen voor het tonen van nodes in de tree: - Association owner: Zaaktype - Association (reference): <leeg> - Association (reference set): Module.ZaakType_ZaakType/Module.Zaaktype (de verzameling parents) - Association direction: ‘The association owner is the child’. (oftewel: bij de child leg je de parent vast) - Show relation name: ‘no’

Attributen voor het mogelijk maken van drag & drop functionaliteit in de tree: @TODO: ‘drop attributen beschrijven’

Sectie: Rendering

Bij ‘rendering’ geef je op hoe de node in de tree zich moet gedragen en hoe deze opgemaakt moet worden

Attributen: - Caption: de titel die je eventueel in de tree getoond wil hebben. - Applies to type: definieert op welk soort node in de tree de opmaak van toepassing is (in ons geval Zaaktype) - Display mode: hier geef je aan of je de Caption wil tonen, of de waarde van een attribuut van het object, of een plaatje etc (in ons geval ‘Display attribute value’) - Attribute: het attribuut waarvan e.v.t. de waarde getoond moet worden (in ons geval Zaaktype.naam) - (Default image): hier kun je een icoontje opgeven zodat als er ongelijke typen nodes zijn elk type node zijn eigen icoon kan krijgen.

Andere attributen worden hier niet behandeld.

Sectie: Actions

Deze sectie regelt het afvangen van ‘events’ in de tree en het aanroepen van microflows om deze events af te handelen. In het voorbeeld wordt de ‘selection change’ event afgevangen om er voor te zorgen dat de details van de node getoond worden in de dataview naast het scherm.

Attributen: - ActionName: deze naam moet ingevuld, maar wordt in dit voorbeeld niet gebruikt bij de rendering. - Applies to type: hier geef je op voor welke node de actie afgaat - Microflow: de microflow die de actie moet afhandelen (zie voor een definitie de hieronder gedefinieerde microflow) - Microflow (no selection): in dit voorbeeld leeg gelaten, geen idee waar dit voor is - Is default action: "no". NB: de default action is de action die je onder de ‘dubbelklik’ in de tree wil hebben. In het voorbeeld willen we echter de ‘singleklik’ afvangen. Het is dus mogelijk om meerdere acties op een tree te definieren! - Fire on selection change: "Yes". Deze instelling zorgt er voor dat we de ‘singleklik’ afvangen en die via de bij deze action gedefinieerde microflow laten afhandelen.

Tabblad 2: Settings

De volgende attributen kun je manipuleren: - Hide root node: daarmee wordt de bovenste node in de tree verborgen. Dit kan handig zijn als er een ContextObject als bovenste item is gedefinieerd in het domeinmodel EN dit object is ook opgenomen in de tree (is in dit voorbeeld niet zo) - Expand mode: kies hier het gedrag rond in- en uitvouwen van de tree nodes

Tabblad 3: Common

Geen attirbuut instellingen gedaan.

Microflows

In het voorbeeld worden twee microflows gebruikt (niet onder architectuur).

Microflow: IVK_zaaktype_toon_current

Deze microflow is gekoppeld aan de action die afgaat bij de ‘singleklik’. De flow zorgt er voor dat de 1:1 hulprelatie tussen Zaaktype en ZaaktypeContext wordt gezet (niet gecommit!). ZaaktypeContext -(1)------(1)-> Zaaktype. De flow roept de SUBzaakcontextaanmakenofselecteren

Microflow: SUB_zaakcontext_aanmaken_of_selecteren

Deze microflow zorgt er voor dat als er nog geen ZaaktypeContext is er een wordt aangemaakt en als er wel een is dat deze wordt geselecteerd. In feite is deze oplossing ‘dirty’ maar werkt.

SUCCES GEWENST....

answered