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 of 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.

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

templates/app/views/side-menu.html

SEARCH

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

REPLACE

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

To add more than one page, e.g. two pages, check this code.

<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}">
                    <divclass="icon-text">
                      <span class="icon ion-heart icon-primary"></span>
                        <span>New Page</span>
                    </div>
                </a>

<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}">
                    <divclass="icon-text">
                      <span class="icon ion-heart icon-primary"></span>
                        <span>Second New Page</span>
                    </div>
                </a>

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

And for the Arabic version.

templates/app/views/side-menu.html 

SEARCH

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

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}">
                    <divclass="icon-text">
                        <span class="icon ion-heart icon-primary"></span>
                        <span>New Page</span>
                    </div>
                </a>
            </ul>
        </ion-content>
    </ion-side-menu>

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

New Page Ordering app

Show another page from the web

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>
        <div class="version-app">

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>
<div class="version-app">

This will open something like this

New Page Delivery app

Show another page from the web

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/menu.html

SEARCH

<div class="item menu-list-item"  ng-click="signout()">

REPLACE

<div class="item menu-list-item">

 <div class="icon-text icon-order">

 <i class="icon ion-locked"></i>

 <a style="color:grey;" onclick="window.open('https://www.ordering.co', '_blank', 'status=yes, menubar=yes, toolbar=yes,scrollbars=yes,resizable=yes')"><span>New Page</span></a>

 </div>

 </div>

 <div class="item menu-list-item" ng-click="signout()">

This will open something like this

New page Business app

Show another page from the web

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/menu.html

SEARCH

<md-list-item class="menu-list-item" ng-click="navigateTo('login')">

REPLACE

<md-list-item class="menu-list-item">

 <div class="md-list-item-inner">

 <i class="icon ion-locked"></i>

 <a onclick="window.open('https://www.ordering.co', '_blank', 'status=yes, menubar=yes, toolbar=yes,scrollbars=yes,resizable=yes')"><span>New Page</span></a>

 </div>

 </md-list-item>

 <md-list-item class="menu-list-item" ng-click="navigateTo('login')">

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.