Skip to main content

Wireframe

This module adds the ability for users to create and share wireframes.

Installation​

Because there is some complexity involved in this module, the installation has a few more steps than usual.

Back-end​

composer require qore/wireframe
php artisan vendor:publish --tag=qore.wireframe.db
php artisan vendor:publish --tag=qore.wireframe.frontend
php artisan tenants:migrate
php artisan vendor:publish --tag=qore.wireframe.bin

The last command will place a bin directory in your project root folder. In here exists a small Nodejs script (exporter/index.js) that will be responsible for exporting the wireframe to a PDF file.

Go into the bin/exporter directory and install the dependencies:

cd bin/exporter && yarn
caution

You should probably not commit the bin directory to git. Instead, publish the bin directory once on the server (in a directory outside of deployer), so there is no need to update your CI/CD.

Now add the following to your .env:

# Path to the exporter directory, you should put the absolute path to your bin/exporter/index.js file
WIREFRAME_EXPORTER_PATH=path/to/bin/exporter/index.js
# Optional path to node binary, this path will be found automatically
# NODE_PATH=path/to/node
caution

There might be issues with running this export synchronously (e.g. on shared web hosting), so it is recommended that you use a queue driver that supports async jobs, such as database.

caution

If PDF export seems to do nothing, check your storage/laravel.log file for errors. Potential issue could be that your application only runs on 1 thread (via php artisan serve), which can be fixed by adding PHP_CLI_SERVER_WORKERS=5 to your .env file.

Front-end​

Requires front-end packages:

  • yarn add vue-grid-layout
  • yarn add fabric
  • yarn add fabric-history

Add the following route to front-end router/routes.js:

import {wireframeDemoRoutes} from 'vendor/wireframe/routes'

// Append the routes somewhere, e.g. above the * route
...wireframeDemoRoutes,

Then register the wireframe store in store/index.js:

import wf from 'vendor/wireframe/store'
// ...
modules: {
    auth,
        globals,
        table,
        wf // here
}
,

Usage​

You can now enable the module in the interface.

A permission will be added to the roles & permissions page, it will be added to the admin role by default.

Then go to the wireframe prototypes resource, which can be added to the sidebar:

 if (module_is_active('qore/wireframe')) {
    $tab->addResourceMenuItem(resource('prototypes'));
}

Changing layout settings​

If you want to change some settings like setting a different logo, you can click on a wireframe page, then right click on the logo in the top left corner.

Upgrade Guide​

composer update qore/wireframe

If you need to upgrade migrations or Vue components:

php artisan vendor:publish --tag=qore.wireframe.db --force
php artisan vendor:publish --tag=qore.wireframe.frontend --force