Add details about navigation nodes and reading node parameters #138

bszwarc · 2018-10-15T13:03:42Z

Description

Changes proposed in this pull request:

Added details about the navigation structure in Luigi application
Fixed minor grammar issues

Related issue(s)
For details, see #101

hardl · 2018-10-24T07:23:35Z

docs/navigation-configuration.md

+
+The main application URL with the parameters is as follows: `https://luigiexample.com/home/projects/pr23?~sorting=asc&~page=2`
+
+The navigation structure with the project list view using these the parametrs is as follows:


there seems to be something wrong with that sentence

I reworked the structure a bit to make it clearer

hardl · 2018-10-24T07:26:41Z

docs/navigation-configuration.md

+````
+## Node navigation
+
+When you navigate between Nodes that are located on the same domain, Luigi triggers a hash or path change. Then it sends an updated context in order not to fully reload the view for a single-page application based micro front-end. Navigation between domains triggers a full page load in order to comply with cross-domain security concepts.


Nodes should be lower case

Done - all mentions of "node" are now lowercase.

bszwarc

I changed all node occurrences to lowercase and updated one section.

bszwarc · 2018-10-29T13:54:16Z

docs/navigation-configuration.md

+
+All parameters without the prefix are not passed to the micro front-end and are consumed by the main application. 
+
+A sample **viewUrl** `https://luigiexample.com/home/projects/pr23?~sorting=asc&~page=2` supports sorting and paging (with the page number as a numerical value) by introducing the **sort** and **page** node parameters.


The reworked part.

klaudiagrz · 2018-10-30T08:12:52Z

docs/navigation-configuration.md


 Navigation parameters allow you to specify routing configuration, set the appearance of navigation, and define navigation structure.

-## A basic example
+# Navigation elements


Suggested change

# Navigation elements

## Navigation elements

Only titles are introduced with H1. Main headings are H2 and sub-sections are H3.

klaudiagrz · 2018-10-30T08:17:02Z

docs/navigation-configuration.md


-These are the elements of the Luigi navigation:
+- Top navigation, where the main navigation path is displayed.
+- Side navigation, where the application are defined.


Suggested change

- Side navigation, where the application are defined.

- Side navigation, where the applications are defined.

klaudiagrz · 2018-10-30T08:19:29Z

docs/navigation-configuration.md

- A main content window
-
-The image shows where you can use various methods and parameters to fill the navigation or display a micro front-end.
+The image shows where in the navigation you can use various methods and parameters to create the navigation structure or display a micro front-end.  

 ![Navigation layout](assets/navigation-structure.png)


Please adjust the screenshot to the guidelines:
https://github.com/kyma-project/community/blob/master/guidelines/content-guidelines/screenshots.md

Add a border to the screenshot

Use red for indicators such as arrows or boxes

klaudiagrz · 2018-10-30T08:19:57Z

docs/navigation-configuration.md


 ![Navigation layout](assets/navigation-structure.png)

-This code sample demonstrates your options when configuring navigation for Luigi.
+
+# Navigation structure


Suggested change

# Navigation structure

## Navigation structure

klaudiagrz · 2018-10-30T08:24:37Z

docs/navigation-configuration.md

+  }
+}
+````
+## Node navigation


Suggested change

## Node navigation

### Node navigation

I assume this is the sub-section of the ## Navigation structure ?

Yes it is :)

klaudiagrz · 2018-10-30T09:30:24Z

docs/navigation-configuration.md

+## Node navigation parameters
+
+- **nodeAccessibilityResolver** allows you to define a permission checker function that gets executed on every node. If it returns `false`, Luigi removes the node and its children from the navigation structure.
+- **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/sampleconfig.js) for the **constraints** example.


Broken link - please fix.

klaudiagrz · 2018-10-30T09:30:43Z

docs/navigation-configuration.md

+- **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/sampleconfig.js) for the **constraints** example.
+
+## Node parameters
+


The node parameters are as follows:

klaudiagrz · 2018-10-30T09:31:37Z

docs/navigation-configuration.md

+## Node parameters
+
+- **pathSegment** specifies the partial URL of the current segment. **pathSegment** must not contain slashes.
+  - A static settings example reflects `luigidomain.test/settings`, 


Suggested change

- A static settings example reflects `luigidomain.test/settings`,

- A static settings example reflects `luigidomain.test/settings`.

klaudiagrz · 2018-10-30T09:34:05Z

docs/navigation-configuration.md

+  - A dynamic settings example, prefixed with a colon, loads on any other value. 
+- **label** contains the display name of the navigation node.
+- **hideFromNav** shows or hides a navigation node. You can still navigate to the node but it does not show up in the top or left pane.
+- **viewUrl** contains the URL or path to a view rendered when clicking the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.


Suggested change

- **viewUrl** contains the URL or path to a view rendered when clicking the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.

- **viewUrl** contains the URL or path to a view which renders when you click the navigation node. Use either a full URL or a relative path. This value may consist of variables if you specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.

klaudiagrz · 2018-10-30T09:37:54Z

docs/navigation-configuration.md

+- **hideFromNav** shows or hides a navigation node. You can still navigate to the node but it does not show up in the top or left pane.
+- **viewUrl** contains the URL or path to a view rendered when clicking the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.
+- **navigationContext** contains a named node that is mainly for use in combination with a dynamic **pathSegment** to start navigation from a dynamic node using ` LuigiClient.navigationManager().fromContext('contextname')`.
+- **context** sends the specified object as context to the view. Use this parameter in combination with the dynamic **pathSegment** to receive the context through the context listeners of **Luigi client**. This is an alternative to using the dynamic value in the **viewUrl**.


Suggested change

- **context** sends the specified object as context to the view. Use this parameter in combination with the dynamic **pathSegment** to receive the context through the context listeners of **Luigi client**. This is an alternative to using the dynamic value in the **viewUrl**.

- **context** sends the specified object as context to the view. Use this parameter in combination with the dynamic **pathSegment** to receive the context through the context listeners of **Luigi Client**. This is an alternative to using the dynamic value in the **viewUrl**.

bszwarc

Corrected the document.

bszwarc · 2018-10-30T06:22:02Z

docs/navigation-configuration.md

+
+A sample **viewUrl** `https://luigiexample.com/home/projects/pr23?~sorting=asc&~page=2` supports sorting and paging (with the page number as a numerical value) by introducing the **sort** and **page** node parameters.
+
+The navigation structure with the project list view using such sample node parameters parameters


Should be The navigation structure with the project list view using such sample node parameters looks as follows:

bszwarc · 2018-10-30T09:58:07Z

docs/navigation-configuration.md


 Navigation parameters allow you to specify routing configuration, set the appearance of navigation, and define navigation structure.

-## A basic example
+# Navigation elements


bszwarc · 2018-10-30T10:11:09Z

docs/navigation-configuration.md


-These are the elements of the Luigi navigation:
+- Top navigation, where the main navigation path is displayed.
+- Side navigation, where the application are defined.


bszwarc · 2018-10-30T10:11:26Z

docs/navigation-configuration.md


 ![Navigation layout](assets/navigation-structure.png)

-This code sample demonstrates your options when configuring navigation for Luigi.
+
+# Navigation structure


bszwarc · 2018-10-30T10:12:06Z

docs/navigation-configuration.md

+  }
+}
+````
+## Node navigation


Yes it is :)

bszwarc · 2018-10-30T11:10:46Z

docs/navigation-configuration.md

+- **useHashRouting** defines either hash-based (`url.com/#/yourpath`) or path-based (`url.com/yourpath`) routing.
+- **nodeParamPrefix** sets the prefix character when using the `LuigiClient.linkManager().withParam()` function, which provides a way to simply attach query parameters to the view URL for activities such as sorting and filtering.  The URL contains the parameters to allow deep linking. If you want to use a different character prefix, define yours here. The default character is `~`.
+
+## Node navigation parameters


bszwarc · 2018-10-30T11:11:03Z

docs/navigation-configuration.md

+- **nodeParamPrefix** sets the prefix character when using the `LuigiClient.linkManager().withParam()` function, which provides a way to simply attach query parameters to the view URL for activities such as sorting and filtering.  The URL contains the parameters to allow deep linking. If you want to use a different character prefix, define yours here. The default character is `~`.
+
+## Node navigation parameters
+


bszwarc · 2018-10-30T11:11:30Z

docs/navigation-configuration.md

+## Node parameters
+
+- **pathSegment** specifies the partial URL of the current segment. **pathSegment** must not contain slashes.
+  - A static settings example reflects `luigidomain.test/settings`, 


bszwarc · 2018-10-30T11:11:57Z

docs/navigation-configuration.md

+  - A dynamic settings example, prefixed with a colon, loads on any other value. 
+- **label** contains the display name of the navigation node.
+- **hideFromNav** shows or hides a navigation node. You can still navigate to the node but it does not show up in the top or left pane.
+- **viewUrl** contains the URL or path to a view rendered when clicking the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.


bszwarc · 2018-10-30T11:12:13Z

docs/navigation-configuration.md

+- **hideFromNav** shows or hides a navigation node. You can still navigate to the node but it does not show up in the top or left pane.
+- **viewUrl** contains the URL or path to a view rendered when clicking the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.
+- **navigationContext** contains a named node that is mainly for use in combination with a dynamic **pathSegment** to start navigation from a dynamic node using ` LuigiClient.navigationManager().fromContext('contextname')`.
+- **context** sends the specified object as context to the view. Use this parameter in combination with the dynamic **pathSegment** to receive the context through the context listeners of **Luigi client**. This is an alternative to using the dynamic value in the **viewUrl**.


klaudiagrz · 2018-10-30T12:32:03Z

docs/navigation-configuration.md

+
+### Path parameters
+
+Use the path parameter values to define the **pathSegment** in your configuration. You can either use a static value for your **pathSegment**, or add a colon to this value as in `:projectId`, to and make it act as a parameter. This tells Luigi to accept any value for this **pathSegment** of the main application URL. The value replaces the parameter when it is further processed by the application.


Suggested change

Use the path parameter values to define the **pathSegment** in your configuration. You can either use a static value for your **pathSegment**, or add a colon to this value as in `:projectId`, to and make it act as a parameter. This tells Luigi to accept any value for this **pathSegment** of the main application URL. The value replaces the parameter when it is further processed by the application.

Use the path parameter values to define the **pathSegment** in your configuration. You can either use a static value for your **pathSegment** or add a colon to this value, as in `:projectId`, to make it act as a parameter. This tells Luigi to accept any value for this **pathSegment** of the main application URL. The value replaces the parameter when it is further processed by the application.

klaudiagrz · 2018-10-30T12:35:24Z

docs/navigation-configuration.md

+
+# Navigation configuration parameters reference 
+
+You can use the listed parameters and functions to configure your navigation structure. The examples show you how you can use selected options.


klaudiagrz · 2018-10-30T12:37:06Z

docs/navigation-configuration.md

+## Node navigation parameters
+
+- **nodeAccessibilityResolver** allows you to define a permission checker function that gets executed on every node. If it returns `false`, Luigi removes the node and its children from the navigation structure.
+- **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/sampleconfig.js) for the **constraints** example.


klaudiagrz · 2018-10-30T12:37:12Z

docs/navigation-configuration.md

+- **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/sampleconfig.js) for the **constraints** example.
+
+## Node parameters
+


…nt (SAP#138)

bszwarc added WIP Work in progress area/documentation labels Oct 15, 2018

bszwarc requested review from kazydek, klaudiagrz and tomekpapiernik as code owners October 15, 2018 13:03

bszwarc force-pushed the issue-101-nodeparams branch from e017918 to 43bfcf5 Compare October 17, 2018 14:18

hardl self-assigned this Oct 19, 2018

bszwarc requested review from antiheld, dariadomagala-sap, hardl, jesusreal, kwiatekus, maxmarkus, pekura and y-kkamil as code owners October 23, 2018 09:21

bszwarc force-pushed the issue-101-nodeparams branch 2 times, most recently from f263527 to 0db0b8c Compare October 23, 2018 09:47

hardl requested changes Oct 24, 2018

View reviewed changes

bszwarc commented Oct 29, 2018

View reviewed changes

bszwarc removed the WIP Work in progress label Oct 30, 2018

klaudiagrz suggested changes Oct 30, 2018

View reviewed changes

bszwarc requested a review from parostatkiem-zz as a code owner October 30, 2018 12:20

bszwarc commented Oct 30, 2018

View reviewed changes

klaudiagrz reviewed Oct 30, 2018

View reviewed changes

klaudiagrz approved these changes Oct 30, 2018

View reviewed changes

bszwarc force-pushed the issue-101-nodeparams branch 2 times, most recently from 52813c4 to 45eaa33 Compare October 30, 2018 13:39

Add information about navigation configuration and restructure document

34491f5

bszwarc force-pushed the issue-101-nodeparams branch from 45eaa33 to 34491f5 Compare October 30, 2018 13:44

hardl approved these changes Oct 31, 2018

View reviewed changes

bszwarc merged commit ada486b into SAP:master Oct 31, 2018

bszwarc deleted the issue-101-nodeparams branch October 31, 2018 10:25

stanleychh pushed a commit to stanleychh/luigi that referenced this pull request Dec 30, 2021

Add information about navigation configuration and restructure docume…

66a28eb

…nt (SAP#138)


		The main application URL with the parameters is as follows: `https://luigiexample.com/home/projects/pr23?~sorting=asc&~page=2`

		The navigation structure with the project list view using these the parametrs is as follows:


		All parameters without the prefix are not passed to the micro front-end and are consumed by the main application.

		A sample viewUrl `https://luigiexample.com/home/projects/pr23?~sorting=asc&~page=2` supports sorting and paging (with the page number as a numerical value) by introducing the sort and page node parameters.

	- Side navigation, where the application are defined.
	- Side navigation, where the applications are defined.

		- nodeAccessibilityResolver receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/sampleconfig.js) for the constraints example.

		## Node parameters

	- A static settings example reflects `luigidomain.test/settings`,
	- A static settings example reflects `luigidomain.test/settings`.

	- context sends the specified object as context to the view. Use this parameter in combination with the dynamic pathSegment to receive the context through the context listeners of Luigi client. This is an alternative to using the dynamic value in the viewUrl.
	- context sends the specified object as context to the view. Use this parameter in combination with the dynamic pathSegment to receive the context through the context listeners of Luigi Client. This is an alternative to using the dynamic value in the viewUrl.

		- nodeParamPrefix sets the prefix character when using the `LuigiClient.linkManager().withParam()` function, which provides a way to simply attach query parameters to the view URL for activities such as sorting and filtering. The URL contains the parameters to allow deep linking. If you want to use a different character prefix, define yours here. The default character is `~`.

		## Node navigation parameters


		### Path parameters

		Use the path parameter values to define the pathSegment in your configuration. You can either use a static value for your pathSegment, or add a colon to this value as in `:projectId`, to and make it act as a parameter. This tells Luigi to accept any value for this pathSegment of the main application URL. The value replaces the parameter when it is further processed by the application.


		# Navigation configuration parameters reference

		You can use the listed parameters and functions to configure your navigation structure. The examples show you how you can use selected options.

Add details about navigation nodes and reading node parameters #138

Add details about navigation nodes and reading node parameters #138

Conversation

bszwarc commented Oct 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bszwarc left a comment

Choose a reason for hiding this comment

bszwarc Oct 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bszwarc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bszwarc Oct 29, 2018 •

edited

Loading