Documentation | NWICODE

Here you will find everything you need to start developing your first layout from the structure to the updates and package to the archive.

What is the layout?

Layouts are the basis of your application, they determine the design of the main page of your application.


What you need to know

  • A new idea for a cool interface to share with users!
  • Knowledge of html / css / javascript
  • Follow these instructions

Define two names:

  • Your package name likeMyAwesomeLayout.
  • Your layoutcodethat should be unique and is limited to 50 characters, for examplemy_awesome_layout.

These two names will ensure that your layout is in a namespace, avoiding conflicts with any other layout.

Note: Your layout should be compatible with most resolutions and device orientations.

The structure of the package layout

Layouts are in the folderapp/local/modules

The following is a complete and necessary structure for the layout
├─ resources
│  ├─ db
│  │  └─ data
│  │     └─ my_awesome_layout.php
│  ├─ design
│  │  └─ desktop
│  │     └─ flat /** Flat design */
│  │        └─ images
│  │           └─ customization
│  │              └─ layout
│  │                 └─ homepage
│  │                    └─ my_awesome_layout.png
│  └─ var
│     └─ apps
│        └─ modules
│           └─ layout
│              └─ home
│                 └─ my_awesome_layout
│                    ├─ hooks.js
│                    ├─ style.css
│                    └─ view.html
├─ init.php
├─ package.json
└─ [...]


package.json Used by the installer


"name": "MyAwesomeLayout",
  "description": "MyAwesomeLayout description",
  "type": "layout",
  "version": "1.0",
  "release_note": {
    "url": "",
    "show": true
  "dependencies": {
    "system": {
      "type": "Start",
      "version": "1.1.0"
field The need Description
name Yes The package name, avoid spaces and numbers, as it is also your class name and folder nameapp/local/modules/MyAwesomeLayout/[...]
description Yes Package description
type Yes must belayout
version Yes Your version of the layout for updates
Release Note no url: link to a valid description of the HTML to be displayed in a modal window when installed, show: (true / false) to force display
according to Yes version *: at least 1.1.0, type: Start / Studio / Saas minimal installation type

* the version should be 1.1.0

Fileinit.php is used to mount and check file layout and update content.

However, the syntax and methods used in the Init are the same as in the old bootstrap.

$bootstrapis a reference to the Zend Bootstrap, if you need to connect it.

The size of the icons and images

If your layout requires an image with custom ratio to illustrate the features, you can register a callback function in the so-called functionsinit.php.

\Nwicode_Feature::registerRatioCallback("my_awesome_layout", function($position) {
    $sizes = array(
        "width" => 800,
        "height" => 400,

    return $sizes;

my_awesome_layoutthis is your unique code layout.

$positionis the position of the current function, so you can have different sizes for different positions in the layout.

the function should return an array withwidth andheight keys.


This file creates and updates a record in the database and copies the resources during installation

If you need to change the settings in your module, when providing the upgrade, you must change the values here

Note: you should never change, socode as is a unique code used to update your layout, otherwise it will create a new layout.

    "borders" => "border-left",
    "borders" => "border-top",
    "label" => "label-left",
    "textTransform" => "title-lowcase",

# MyAwesomeLayout
$datas = array(
    'name'                       => 'MyAwesomeLayout',
    'visibility'                 => \Application_Model_Layout_Homepage::VISIBILITY_HOMEPAGE,
    'code'                       => 'my_awesome_layout',
    /** Preview is relative to [...]/resources/design/desktop/[flat|nwicode]/images/  */
    'preview'                    => '/customization/layout/homepage/my_awesome_layout.png',
    'use_more_button'            => 1,
    'use_horizontal_scroll'      => 0,
    'number_of_displayed_icons'  => 8,
    'position'                   => "bottom",
    "order"                      => 1200,
    "is_active"                  => 1,
    "use_subtitle"               => 1,
    "use_homepage_slider"        => 1,
    "options"                    => $default_options,

$layout = new \Application_Model_Layout_Homepage();

# Copying assets at installation time
# same path as in `Nwicode_Assets::registerAssets`
field The need Description
name Yes Is the name of your layout, it can beMy Awesome Layout
code Yes must be your codcordarone heremy_awesome_layout
preview Yes This image is used under Design> CHOOSE YOUR PLAN
use_more_button Yes Does your layout with modal and therefore requires more_button
use_horizontal_scroll Yes -
number_of_displayed_icons Yes The number of features used while usinguse_more_buttonthis placeholderfeatures.overview.options
position Yes The position of your menu: down, left, right
order Yes Order in the Design section> SELECT YOUR
is_active Yes should be 1
use_subtitle Yes Does your layout subtitles. /!
use_homepage_slider no Designed your layout to work with the homepageslider.
options no The default settings for your layout

The structure of the layout

The scheme consists of 3 or 4 files , usuallyview.htmlstyle.csshooks.js and in case of needmodal.html

  • view.htmlThis is the main form layout.
  • style.cssAll the relevant CSS for your layout
  • hooks.jsThis file contains all the hooks to tell Ionic that to load and how to organize functions
  • modal.htmlIf you need to set modal, this is the file you are looking for, otherwise you can use one of the existing modal


  • {{ }}

    {{ feature.subtitle }}

The layout of your home page should be wrapped as

at least two classes: firstlayoutsecondmy_awesome_layout.

Each function is an element and needs some guidelines:

Item Necessary ? Description
Yes This Directive associates the start of your element
Yes Sets the option for the current function

Есть вопросы — спрашивайте!

Наши специалисты помогут Вам, окажут бесплатную консультацию или запишут на приём


Новости 1 - 20 of 48
First | Prev. | 1 2 3 | Next | Last