To access the tool, login to Ingeniux and click on ‘Administration’ and then 'Schema Designer' in the left pane.

In the right-hand pane we will see a list of all the current page types in Ingeniux. There are three tabs along the top- 'Page Types,' 'Components,' and 'Inavlid Schemas.'

With the 'Page Types' tab selected, click 'New' in the right-hand pane. Ingeniux will create a new blank page type schema and direct you to the schema editor section. You will be presented with a blank schema which looks like this image

Fill in the schema head section to match the following image. Note that Display Name can be any value but, by convention, Root Name should not contain any spaces. Also note that when we create the C# view, the C# document filename must be exactly the same as the schema root name.

We can now begin adding elements to the schema for our new cookbook page type. Ingeniux users will see these elements as a form when they create or edit the page. Begin by dragging an 'Image' element from the asset panel into the elements section. This image element will allow a user to specify the banner element of the cookbook page. Copy the fields in the following image for the new image element.

On our new cookbook page we want the page creator to be able to enter some custom HTML before the list of recipes. To do this drag the ‘XHTML Editor’ from the asset panel into the elements section. Match the fields for this element with the image bellow:

Next we need to handle the dynamic list of recipes. To do this we will allow the person who creates the page to specify a folder that contains all the recipes. Our page will render all recipes with the folder. Drag the ‘Navigation’ element from the asset panel into the elements section. Match the fields for this element with the image bellow:

By specifying the navigation type as ‘children,’ we are letting Ingeniux know we want a list of all the children of the item the navigation element is pointing at. In our case this will be all the recipes nested in a specified folder.

Next set the export value of the navigation as shown below. To learn more about exports see creating exports.

The last step is to add an element that is common to all page types within Ingeinux on byui.edu. This element is another navigation element called ‘ancestor navigation.’ This element will help us know where exactly our page is in the entire site structure and is used for rendering breadcrumbs. Drag another ‘Navigation’ element from the asset panel into the elements section and match the fields with the following image:

Our new cookbook page type schema is done! Click ‘Save’ -> ‘Save new version.’ to create your schema.

The next step is to create another schema that represents a recipe. To do this click the management tab and highlight our newly created ‘Cookbook’ page then click ‘Copy’ in the right-hand panel. Use the following images as a reference to create the new schema. When you are done click ‘Save’ -> ‘Save new version.’ You can use the 'Delete' button in the right-hand panael to remove elements that are not needed.

We are now ready to create our views! Open up your favorite code editor (Visual Studio is great for getting started). Views are written in C# ussing a syntax called Razor.

We will begin by creating the view for the 'Cookbook' page type. First we need to create the actual view file. Navigate to /DSS_Preview/Views/CMSPageDefault/ and create a new file called "Cookbook.cshtml". Remeber the name of the file must match the root element of the XML it transforms exactly.

Paste the following starter code into line 1 of Cookbook.cshtml:

			//Let Ingeniux know this is a page, not a modular element
			@model Ingeniux.Runtime.CMSPageRequest

			//set the rendering start point
			@{
				Layout = "~/Views/Shared/_MainLayout.cshtml";
			}
		

Note that a full guide of using Razor/C# is not attempted here. Check out W3C for a great guide.

To test that the view is correctly connected with the cookbook schema we created, paste the following code just beneath the code you just entered:

			...
			
Hello World
		

Jump back to ingeniux and preview the cookbook page. You should see a big "Hello World."

Let's add our basic HTML structure. Replace <h1>Hello World</h1> with:

			...
			

			
		

Next we need to render the breadcrumb for the page. Luckily this is very simple. All you need to do is include the breadcrumb that has already been created like this:

		...
		

			@{
				//breadcrumbs
				Html.RenderPartial("PageLayout/Breadcrumb");
			}
		
	

If we preview the page at this point you will notice the styles look a bit off. This is because we have not flagged the cookbook pagetype as responsive. To flag this page as responsive see flagging a page as responsive.

Next we need to render the banner image at the top of our page. To do this make Cookbook.cshtml look like following:

		@model Ingeniux.Runtime.CMSPageRequest

		@{
			Layout = "~/Views/Shared/_MainLayout.cshtml";

			//grab the banner image source from the XML
			var bannerImageSrc = Model.XPathSelectElement("//BannerImage");
		}

		

			@{
				//breadcrumbs
				Html.RenderPartial("PageLayout/Breadcrumb");

				//if the banner image source is not null
				if (bannerImageSrc != null)
				{
					
				}
			}
		
	

An important method we are using in the above code is XPathSelectElement(). This method is used to extract the data from the XML document. For a more detailed description of this and other methods see the methods section.

Now we will render the custom HTML our page creators can insert. To do this we will need to let Ingeniux know to render a string as actual HTML:

		@model Ingeniux.Runtime.CMSPageRequest

		@{
			Layout = "~/Views/Shared/_MainLayout.cshtml";

			//grab the banner image source from the XML
			var bannerImageSrc = Model.XPathSelectElement("//BannerImage");

			//get any custom HTML from the page creator
			var bodyCopy = Model.XPathSelectElement("//BodyCopy");
		}

		

			@{
				//breadcrumbs
				Html.RenderPartial("PageLayout/Breadcrumb");

				//if the banner image source is not null
				if (bannerImageSrc != null)
				{
					
				}
			}
			

				

					@Html.Raw(bodyCopy.Value)
				
    
			
		
	

If you filled in the information in the Cookbook page form in Ingeniux and preview the page, you should now see the image you specified and any text you enetered in the 'Body Copy' section.

We now need to render all the recipes in the 'recipes' folder. For testing purposes make sure the 'Recipe Folder' navigation in your Cookbook page is pointing at the 'Recipes' folder. Click on Recipe 2 and Recipe 1 and fill in all boxes with dummy content. You can leave 'Ancestor Navigation' and 'View Name' alone.

In the following code we grap all the recipes in the specified folder and loop through them. At each iteration of the loop we output a new row which contains the recipe name, description, and a link to the full recipe page.

		@model Ingeniux.Runtime.CMSPageRequest

		@{
			Layout = "~/Views/Shared/_MainLayout.cshtml";

			//grab the banner image source from the XML
			var bannerImageSrc = Model.XPathSelectElement("//BannerImage");

			//get any custom HTML from the page creator
			var bodyCopy = Model.XPathSelectElement("//BodyCopy");

			//get all recipes in the recipes folder (notice the 's' in the method call)
			var recipes = Model.XPathSelectElements("//Navigation[@Name='RecipeFolder']/Page");
		}

		

			@{
				//breadcrumbs
				Html.RenderPartial("PageLayout/Breadcrumb");

				//if the banner image source is not null
				if (bannerImageSrc != null)
				{
					
				}
			}

			

				

					@Html.Raw(bodyCopy.Value)
				
    
			

			@{
				/*
				* loop through all recipes and output the following:
				* 1. recipe name
				* 2. recipe description
				* 3. link to recipe page  
				*/
				foreach(var recipe in recipes) 
				{
					

						

							

								@recipe.GetAttributeValue("Name")
							
						
						

							

								@recipe.GetAttributeValue("Changed")
							
						
					
				}
			}