sidemenu and variables

I try to populate sidemenu body with variables but doesn’t work.
If I use this code doesn’t work

webix.ui({
			view: "sidemenu",
			id: "menutablet",
			//width: 200,
			position: "left",
			state: function (state) {
				var toolbarHeight = $$("toolbarS4BT").$height;
				state.top = toolbarHeight;
				state.height -= toolbarHeight;
			},
			css: "my_menu",
			body: menu
		});

		var menu = {
			view: "menu", id: "top:menu",
			width: 180, layout: "y", select: true,
			template: "<span class='webix_icon fa-#icon#'></span> #value# ",
			data: [
				{ value: "Dashboard", id: "start", icon: "briefcase" },
				{ value: "tablet", id: "mydash", icon: "arrows" },
				{ value: "GridLayout", id: "mygrid", icon: "user" },
				{ value: "processi", id: "data", icon: "envelope-o" },
				{ value: "test", id: "widgets", icon: "briefcase" }
			],
			click: (id) => {
				this.show(id);
				//webix.message(id);
			}
			
		};

otherwise if I use this code all work fine

webix.ui({
			view: "sidemenu",
			id: "menutablet",
			//width: 200,
			position: "left",
			state: function (state) {
				var toolbarHeight = $$("toolbarS4BT").$height;
				state.top = toolbarHeight;
				state.height -= toolbarHeight;
			},
			css: "my_menu",
			body: {
				cols:[
					{
						view: "menu", id: "top:menu",
						width: 180, layout: "y", select: true,
						template: "<span class='webix_icon fa-#icon#'></span> #value# ",
						data: [
							{ value: "Dashboard", id: "start", icon: "briefcase" },
							{ value: "tablet", id: "mydash", icon: "arrows" },
							{ value: "GridLayout", id: "mygrid", icon: "user" },
							{ value: "processi", id: "data", icon: "envelope-o" },
							{ value: "test", id: "widgets", icon: "briefcase" }
						]
					}
				]
				
			}
		});

But i don’t understand why.

Hello,
Please check the correct sample: https://snippet.webix.com/quwd7vqy

Thanks, the error was that the variable “menu” must be declared before use it.
But if I have the variable in a separate file .js? how I have to declare it?

Yeap
It depends upon the order of connected scripts.
For example

 <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> 
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript">
<script type="text/javascript " src = "..common/testdata.js"</script>

The first will be webix.js, after that will be testdata.js and then script is going
And, it’s good to use ready method. The event handler code is called just after the page has been completely parsed, protecting you from potential errors and it is an alternative to the onDocumentReady event.

I use Jet Framework
These are my import
import { JetView } from “webix-jet”;
import { menu } from “views/menu”;

I have fixed my issue. I forgot in the menu.js file to export the const “menu”