mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
14
nodes/navigation/common-navigation.md
Normal file
14
nodes/navigation/common-navigation.md
Normal file
@@ -0,0 +1,14 @@
|
||||
## Encoding Parameters in the URL
|
||||
|
||||
The [Page Inputs](/nodes/navigation/page-inputs) node is used to send parameters between Pages by encoding them in the URL. This is useful for example if you want certain input parameters to be available at a page, no matter the state of the app. The user may for example press __Refresh__ in the browser. Since the parameters are encoded in the URL they will still be available in the **Page** through a **Page Inputs** node.
|
||||
Another case for encoding parameters in the URL is for users to be able to share a link, with a full route to a specific place in your app, with specific parameters set.
|
||||
|
||||
There are two types of parameters **Path Parameters** and **Query Parameters**. There can only be one **Path Parameter** while you can have any number of **Query Parameters**.
|
||||
|
||||
### Path Parameter
|
||||
|
||||
A **Path Parameter** is added to the route of the page at the end. For example a **Page** with **URL Path** `mypage` with a path parameter defined, will expect the next part of the route to be the value of that parameter. The route `mypage/monkey` will result in the **Path Parameter** of the **Page** to get the value `monkey`. Using **Path Parameter** is a convenient way to encode a specific data entry to be prepopulated in a **Page**. As an example the **Path Parameter** could be the **Id** of a **Record**.
|
||||
|
||||
### Query Parameter
|
||||
|
||||
A **Query Parameter** are encoded using `?parameter=value;` notation in the URL. You can have any number of **Query Parameters**.
|
||||
34
nodes/navigation/external-link.md
Normal file
34
nodes/navigation/external-link.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: External Link
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# External Link
|
||||
|
||||
This node is used to trigger a navigation to a page outside of your app.
|
||||
|
||||
It also supports common URL schemes, like `mailto:` and `tel:`.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Note that **External Link** does not work in the Noodl Viewer. You need to run the app in a browser for it to work.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Link</span> | <##input:link##>The URL that should be opened when the **Do** signal is triggered. The URL should include the full scheme, e.g. `http://`, `mailto:`, etc. <##input##> |
|
||||
| <span className="ndl-data">Open in New Tab</span> | <##input:openInNewTab##>If this property is set to <span className="ndl-data">true</span> the link will be opened in a new browser tab. Otherwise it will open (and replace) the current Noodl app in the browser.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Recieving a signal to this input will navigate to the external link.<##input##> |
|
||||
47
nodes/navigation/navigate-to-path.md
Normal file
47
nodes/navigation/navigate-to-path.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Navigate To Path
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Navigate To Path
|
||||
|
||||
This node lets you navigate to a specific <span className="ndl-node">[Page](/nodes/navigation/page)</span> node in a <span className="ndl-node">[Page Router](/nodes/navigation/page-router)</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In most cases you will want to use the <span className="ndl-node">[Navigate](/nodes/navigation/navigate)</span> or <span className="ndl-node">[External Link](/nodes/navigation/external-link)</span> nodes for your navigation. The <span className="ndl-node">Navigate To Path</span> node is a low level implementation suitable for more advanced and specific use cases.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Usage
|
||||
|
||||
You don't specify which **Page Router** that should perform the navigation, it will be implicitly resolved using the provided path. For example, if you have a **Page Router** with **URL path** `router1`, with a **Page**with the **URL path** `page1`, which in turn contains an unnamed **Page** with the **URL path** `pageA`, providing the **Path** `/router1/page1/pageA/` will force the two **Page Routers** to navigate to the respective pages.
|
||||
|
||||
In a way, **Navigate To Path** is very much like writing a URL directly into the browser address bar. However the node is only used to navigate between **Pages** in the Noodl project. If you want to navigate to an external URL you should instead use the [External Link](/nodes/navigation/external-link) node.
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Path</span> | <##input:path##>Use this property to set the path to navigate to. Note that the **Path** should not include the domain but only the route within the Noodl project. The **Path** may include a **Path Parameter** as the final part, that will be forwarded to the receiving **Page**. You can also use `{}` to make part of the **Path** dynamic and expose the part as an input. For example the path `/{a}/{b}/` will expose two new inputs _a_ and _b_.<##input##> |
|
||||
| <span className="ndl-data">Query Parameters</span> | You can add any number of **Query Parameters** that will be forwarded to the receiving [Page](/nodes/navigation/page/) through their [Page](/nodes/navigation/page-inputs/) node. |
|
||||
| <span className="ndl-data">Open in new tab</span> | Open the new page in a new browser tab. |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation according to the provided **Path**.<##input##> |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:q-\*##>A **Query Parameter** that will be forwarded to the receiving **Page** node through their **Page Inputs** node.<##input##></span>
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:p-\*##>A **Path Parameter** that will be part of the **Path**.<##input##></span>
|
||||
|
||||
</div>
|
||||
53
nodes/navigation/navigate.md
Normal file
53
nodes/navigation/navigate.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Navigate
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Navigate
|
||||
|
||||
This node is used to navigate between <span className="ndl-node">[Page](/nodes/navigation/page)</span> nodes set up in a <span className="ndl-node">[Page Router](/nodes/navigation/page-router)</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass parameters to the <span className="ndl-node">Page</span> you are navigating to. Any <span className="ndl-data">Path Parameters</span> or <span className="ndl-data">Query Parameters</span> you add will show up as inputs to the <span className="ndl-node">Navigate</span> node if you select that <span className="ndl-node">Page</span> as the <span className="ndl-data">Target Page</span>.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Router</span> | Here you select which **Page Router** that this **Navigation** node will act on. This input is only available if there are multiple **Page Routers** in the project. |
|
||||
| <span className="ndl-data">Target Page</span> | Here you select the **Page** to navigate to. The pages available are based on which **Page Router** this **Navigation** node is associated with. |
|
||||
| <span className="ndl-data">Open in new tab</span> | Open the new page in a new browser tab. |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation to the **Target Page**.<##input##> |
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Page Parameters** | Any page parameters set in the [Pages Inputs](/nodes/navigation/page-inputs) used by the **Page** will be available as inputs on the **Navigate** node. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:pm-\*##> An input parameter originating from the **Page Inputs** node of the **Target Page**.<##input##></span>
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This event is triggered when a navigation as been performed.<##output##> |
|
||||
|
||||
</div>
|
||||
25
nodes/navigation/page-inputs.md
Normal file
25
nodes/navigation/page-inputs.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page Inputs
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page Inputs
|
||||
|
||||
This node is used to pass parameters in the URL when navigating between pages in a [Page Router](/nodes/navigation/page-router).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
One common use for this is when you want certain input parameters to be available in sharable links.
|
||||
|
||||
<##head##>
|
||||
|
||||
@include "./common-navigation.md"
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:pm-\*##>A page parameter that will be available as an input on any **Navigate** node that navigates to its associated **Page**.<##output##></span>
|
||||
123
nodes/navigation/page-router.md
Normal file
123
nodes/navigation/page-router.md
Normal file
@@ -0,0 +1,123 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page Router
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page Router
|
||||
|
||||
This node lets you navigate between your <span className="ndl-node">[Page](/nodes/navigation/page)</span> nodes using the <span className="ndl-node">[Navigate](/nodes/navigation/navigate)</span> or <span className="ndl-node">[Navigate To Path](/nodes/navigation/navigate-to-path)</span> nodes. You can also use the <span className="ndl-node">[External Link](/nodes/navigation/external-link)</span> node to navigate to a page outside your app.
|
||||
|
||||
Unlike the somewhat similar [Component Stack](/nodes/component-stack/component-stack-node) the **Page Router** is optimized for web type navigation (in contrast to app type) and uses URLs and routing as part of the navigation as well as the browser history.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Every <span className="ndl-node">Page Router</span> has a <span className="ndl-data">Start Page</span>. The pages are rendered inside of the <span className="ndl-node">Page Router</span>. You can use the <span className="ndl-data">Clip Behavior</span> option to decide how the <span className="ndl-node">Page Router</span> should wrap its content.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Implementation
|
||||
|
||||
The **Page Router** uses standard browser navigation which means that the user can use the browser **Back** button to navigate back in the **Page Router** history.
|
||||
|
||||
Note that the **Page Router** only navigates between [Pages](/nodes/navigation/page). **Pages** cannot be created through the Node Picker. You create them using **Create Page** in the component side bar.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
After creating your **Pages** they are automatically added to your **Page Router** unless you have multiple **Page Routers** in your project. Then you'll have to add them manually to where they belong.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Start Page
|
||||
|
||||
When creating and adding pages to your **Page Router** you will have to make one of the pages a starting page by opening the menu on the page item in the **Page Router** properties and selecting _Make Start Page"_.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Navigating
|
||||
|
||||
### URLs to Page Routers and Pages
|
||||
|
||||
Noodl uses a URL to route a **Page Router** to a specific **Page**. A **Page Router** may optionally have a **URL Path**. Each page has also has a **URL Path** that will uniquely identify the URL route to that page.
|
||||
|
||||
Generally, the route to a **Page** looks like the following
|
||||
|
||||
`<domainname>#/<route1>/<route2>/<route3>...`
|
||||
|
||||
where `<domainname>` is the domain on where you host the app and each `<route>` points to either a **Page Router** or a **Page** within a **Page Router**. The `<route>` may also include a **Page Parameter** and **Query Parameters** (see below).
|
||||
|
||||
For example a **Page Route** with the **URL Path** 'myrouter', with two possible pages with **URL Paths** _page1_ and _page2_, will have two possible routes: `myrouter/page1` and `#myrouter/page2`. Note the '#' character that is always added in the beginning of a route. If, for example, the Noodl App is deployed on the domain `app.mynoodlapps.com`, entering `https://app.mynoodlapps.com#myrouter/page2` in the browser will take make the **Page Router** with the **URL Path** _myrouter_ navigate to the **Page** with the **URL Path** _page2_.
|
||||
|
||||
### Navigating using Navigation node
|
||||
|
||||
The most straight forward way of navigating between pages within an app is to use the [Navigate](/nodes/navigation/navigate) node. This node will navigate to the **Page** selected in the **Navigation** node. This will update the URL of the browser to the route pointing to that page. There is also a [Navigate To Path](/nodes/navigation/navigate-to-path) node that allows an explicit path to be set, that could for example perform navigation on multiple **Page Routers** at the same time by simply specifying a full URL path.
|
||||
|
||||
## Multiple Page Routers
|
||||
|
||||
If needed, you can use multiple **Page Routers** at the same time. This could for example be used if you have multiple navigation flows within a higher level navigation flow. For example, you may have a top level navigation between the pages _Home_ _Settings_ and _Content_ and within each page have sub navigation into specific pages under each section.
|
||||
|
||||
|
||||
|
||||
@include "./common-navigation.md"
|
||||
|
||||
## Visual Appearance
|
||||
|
||||
The **Page Router** is a visual node. It will automatically expand to take all space available in the current layout, unless its **Clipping Behavior** is set to **Expand To Content Size** in which case it will have the same size as the **Page** its showing (if available).
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Name</span> | <##input:name##>The name of the **Page Router**. If you have multiple **Page Routers** the name will be used to identify them.<##input##> |
|
||||
| <span className="ndl-data">URL path</span> | <##input:urlPath##>An optional path of the **Page Router** when routing a URL towards it.<##input##> |
|
||||
| <span className="ndl-data">Clip Behavior</span> | <##input:clip##>This property controls the size and clipping behavior of the **Page Router**. It has three possible values: **Expand To Content Size**, **Scroll** or **Clip Content**.<##input##><br/><br/>`Expand To Content Size`: Changes the size of the **Page Router** to fit the size of the **Page** it's currently showing.<br/>`Scroll`: Makes the **Page Router** take as much space as it can. Any **Page** inside it will be scrollable if it cannot fit inside the **Page Router**. |
|
||||
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The color that will be shown when there is no **Page** covering the **Page Router** or when the **Page** is transparent.<##input##> |
|
||||
| <span className="ndl-data">Mounted</span> | <##input:mounted##>This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Reset</span> | <##input:reset##>Triggering this action will reset the **Page Router** making it show the start page.<##input##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node also supports the [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html) gadget from the [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/).
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Current Page Title</span> | <##output:current page title##>The title of the page that is currently showing in this **Page Router**.<##output##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
57
nodes/navigation/page.md
Normal file
57
nodes/navigation/page.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page
|
||||
|
||||
The **Page** node is a basic building block when creating web type navigation using a [Page Router](/nodes/navigation/page-router).
|
||||
|
||||
:::note
|
||||
|
||||
**Page** nodes cannot be created throught the node picker, it can only be created by adding a new **Page** in the component list.
|
||||
|
||||
:::
|
||||
|
||||
**Pages** are typically used together with a [Page Inputs](/nodes/navigation/page-inputs) node to be able to provide parameters to the **Page**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Title</span> | <##input:title##>This property controls the title of the **Page** i.e. what the title of the browser window will be say when the **Page** is active.<##input##> |
|
||||
| <span className="ndl-data">URL path</span> | <##input:urlPath##>This property controls the URL route to this **Page** in relation to its [Page Router](/nodes/navigation/page-router).<##input##> See the documentation for [Page Router](/nodes/navigation/page-router) for more details on how routing works. |
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user