> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/visual-navigation-framework/create-a-visual-navigation-framework-project.md).

# Create a Visual Navigation Framework Project

The Visual Navigation Framework allows you to display to your users the nodes and pathways that make up your logicnets. To set up a new project based on the Visual Navigation Framework there are a few steps you need to take first to prepare a new project for use, and this topic guides you through those steps.

## Set Up Your Project

1\. In your LogicNets Designer, click the *projects* folder in the *Projects* pane. Click the *New Project* icon and select *Visual Navigation Framework* from the list of framework templates. Enter the name of your project in the *Project name* field.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-e6d4e46ec15e842b395a6a72ba3fb12b6fa3cefe%2F0d9d7417-2ed9-4d55-abf9-c757288cb47f.jpg?alt=media)

Note that project names can include the following list of valid characters:

```
a-z A-Z 0-9 (space) _ - . : @ < > % ( )
```

2\. If you do not see the *Visual Navigation Framework* template, double-click *Advanced*.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-f52f12ff274e133ead2e2dd5494ece090fbeee94%2Fa1fde678-6df8-40fa-8922-78eaa455af46.png?alt=media)

3\. Using the *Type* dropdown menu select ***based on framework***. From the *Framework* dropdown menu choose ***VisualGuidelineFW***.

Depending on your installation, choose the generic framework or a use-case-specific or company-specific customized version of the framework.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-076fdc601fb493221c16c9620a59e4af4ce5fb15%2Fdebccc4b-f16a-4dcf-821e-f04ae6330968.jpg?alt=media)

4\. Click *Create* and the system will create your project. Your project folder will appear in the *Projects* pane on the left of the Designer window, and the blue folder icon next to your project name indicates that this item is a project.

## Add a Logicnet

1\. To add a logicnet to your project click on the name of your project in the Project pane.

2\. Expand the project by clicking on the **>** or on the blue folder itself. This reveals the subfolders the system creates for holding the items that go into your project, including a subfolder for the logicnets you will create and a subfolder for resources that can include images, data tables, Cascading Style Sheets (CSS), and JavaScript.

3\. Click the *logicnets* folder. In the action menu at the top of the *Projects* pane, click the *New Logicnet* icon to create the first logicnet in your project.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-5eb9395940ff2ec586a91ea443584e5cf990ceb5%2Fa2395c80-9d4b-49e0-847f-40fc2bf6915f.jpg?alt=media)

4\. Enter a name for the logicnet in the *Name* field. You can leave the other fields empty, as they are not required for Visual Guideline projects. You can enter a description in the last box if desired. Click *Save* to save your logicnet.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-785777fdfb75ec4878b61ee41051bc7a41753f70%2F7ee7ce42-3459-4749-98f7-dfcad58b2337.jpg?alt=media)

5\. The system presents your logicnet on the Viewer portion of screen and includes a green *Start* node and a red *Stop* node. You can now begin modeling your content. When you create projects using the Visual Guideline framework, the Viewer displays your logicnet as your users will see it when they run your application. Click the ***manual*** button to turn on the manual layout function. This removes the *Start* and *Stop* nodes so they do not display to your users. You can also click the ***grid*** button to turn on or off the grid display on the Viewer screen to help you with the alignment of nodes.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-efdea4ec6ad9e71aff1e24f2425280e27eb591cb%2F92db8714-77cc-4825-b358-c21f83e3ff28.jpg?alt=media)

6\. The final step before you can begin modeling your first logicnet is to indicate which logicnet is the "starting logicnet" for the project. This tells the system which logicnet should be the first one called when the user starts the application. To set this logicnet, click the name of your project in the *Projects* pane. Click the *Framework* tab, and click ***Modify*** to bring up the project-level settings, which can vary depending on the type of framework your project uses. For more information on the generic framework configuration options see [Visual Navigation Framework: Configuration Options](/release-9/design-considerations-and-frameworks/frameworks/visual-navigation-framework/visual-navigation-framework-configuration-options.md).

On the *Framework* tab, the name of the logicnet that displays in the *Guideline map* field is the first logicnet the application will present when a user runs your application. Click the ellipsis to the right of the field to select the logicnet. Click ***save*** to complete your selection.

IMPORTANT: The LogicNets system "finds" logicnets by name, but it also works with a logicnet's ID, which is frequently hidden from the view of the modeler. Because of this, you should always select a logicnet using the ellipsis rather than typing in the name of the logicnet in the field.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-6520a13700ab42e77e9c084ffddf0e31eba3e860%2F6a347dcc-4f6f-45e4-89e8-2580158603e5.jpg?alt=media)

## Verify Your Setup

To verify you have set everything up correctly for your project you can create one node and test your project.

1\. Go to the logicnet you created.

2\. From the *Designer* tab go to the *form-parts* menu and select ***radio-list*** from the dropdown menu to add a radio-list node onto the Designer canvas.

3\. The system displays the radio-list part editor on the right side of the screen. Enter information in the *Question, Data object,* and *Options* fields. Click the *Submit on Select* checkbox.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-897dc4540f2a4a493090b62c6fc25ccabaf7785f%2F157590e6-f899-4859-a48e-2c06a6e430d7.jpg?alt=media)

4\. Test your project setup by clicking on the name of your project in the *Projects* pane. Clicking the *Test* button to see how the application will appear to users when they run it.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-426234f9301fde5a70acbb6ded0aaf1bcafcb829%2F8e5fccf6-0c31-4991-8553-e04c56b70e6b.jpg?alt=media)

If you have correctly set up your project configurations the system will display your project on the screen. The border of the radio-list question you created will display in blue. Once you answer the question the border will display in green to indicate it has been completed.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-ea0755ea55e6abe4b8c958a191d7efff799e701a%2F19d4f3a5-c3b6-4b94-b424-0ef52f117bf5.jpg?alt=media)

Congratulations! You have successfully configured your project using the LogicNets Visual Guideline Framework.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/visual-navigation-framework/create-a-visual-navigation-framework-project.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.