App Pages

Page with CMS

Following this tutorial, you'll be able to create new pages and access them from the side menu of your apps.

To do this go to your builder and select the app you want to add the pages.

1.- Write down the title you want for your page.

2.- This field is for the direction for your page. Spaces, commas or special symbols are not allowed.

3.- Here you select the type of page. Currently, there is only one type of page; we are going to improve this option in further months.

4.- Clicking on this you will add a page to your app.

5.- Clicking on this clear the previous fields.

6.- Clicking on this to edit the content of your page.

📘 IMPORTANT

You need to edit the content of your page to be able to see it in your app.

7.- Clicking on this to remove the page from your app.

8.- The image resources of your page will appear here, click on the trash can to delete the resource, then you'll need to remove from your page (point 6).

templates/app/views/side-menu.html

SEARCH

</ul>
 </ion-content>
 <div class="version-app">

REPLACE

<a class="item" onclick="window.open('your_page.html', '_blank', 'status=yes, menubar=yes, toolbar=yes,scrollbars=yes,resizable=yes')" ng-class="{arabic_rtl: arabic_rtl}">
 <div class="icon-text">
 <span class="icon ion-heart icon-primary"></span>
 <span>New Page</span>
 </div>
 </a>
 </ul>
 </ion-content>
 <div class="version-app">

And for the Arabic version.

templates/app/views/side-menu.html 

SEARCH

</a>
 </ul>
</ion-content>

REPLACE

<a class="item" onclick="window.open('your_page.html', '_blank', 'status=yes, menubar=yes, toolbar=yes,scrollbars=yes,resizable=yes')" ng-class="{arabic_rtl: arabic_rtl}">
 <div class="icon-text">
 <span class="icon ion-heart icon-primary"></span>
 <span>New Page</span>
 </div>
 </a>
 </ul>
 </ion-content>
 </ion-side-menu>

🚧 IMPORTANT

In the replace section, you must put your page name + '.html'

To modify the icon you must edit this (ion-heart) with the icon of your preference from https://ionicons.com/v2/

If instead of this you wish to open a browser with an external website in the app, that is also possible, this is useful to load for example forms use this in the search and replace:

templates/app/views/side-menu.html

SEARCH

</ul>
 </ion-content>
 </ion-side-menu>

REPLACE

<a class="item" onclick="window.open('https://www.ordering.co/', '_blank', 'status=yes, menubar=yes, toolbar=yes,scrollbars=yes,resizable=yes')" ng-class="{arabic_rtl: arabic_rtl}">
 <div class="icon-text">
 <span class="icon ion-heart icon-primary"></span>
 <span>New Page</span>
 </div>
 </a>
 </ul>
 </ion-content>
 </ion-side-menu>

This will open something like this

Also, if you do not want to do this annoying task we can do it for you, contact us at sales@ordering.co to get a quote and we will help you with it.