contact@wabli.eu +30 2310365188

General

Login to Wabli (1.30) Now playing

See what login options Wabli offers.

Handle invitations (1.55) Now playing

See how you can handle (accept or decline ), inside Wabli, the invitations to join other projects by other users.

View user's profile (0.53) Now playing

See how you can view your Wabli user profile, and some basic information about this user.

Handle project

Create blank project (1.14) Now playing

See how you can create an empty project.

Duplicate project (1.40) Now playing

Once you have created a project, see how you can duplicate this project.

Edit project's info (0.49) Now playing

Once you have created a project, see how you can edit some project's basic info such as the name and the description.

Edit project's members (1.38) Now playing

Once you are the owner of a project, see how you can edit the members of this project (delete members, send invitations).

Delete project (0.45) Now playing

Once you have created a project, see how you can delete it.

Leave project (1.17) Now playing

See how you can leave a project, if you are a member of this project

Handle page


Create page (1.03) Now playing

Once you have created a new project, see how you can create a new empty page.

Delete page (0.44) Now playing

See how you can delete a page of a project.

Duplicate page (1.07) Now playing

Once you are inside a project, and you have created at least one page, see how you can duplicate this page.

Rename page (1.01) Now playing

Once you have created a page inside a project, see how you can rename it's name.

Save page (1.14) Now playing

Once you are designing your page, see how you can save the page.

Design project

Navigation through projects and pages (2.16) Now playing

See how you can navigate through the projects, you belong, and their pages, inside Wabli.

Drag & drop blocks (2.57) Now playing

See how you can start designing a page, with drag & drop mechanism, and what categories of blocks Wabli offers.

Style components (3.03) Now playing

See how you can add styling to your components, when you are designing a page.

Device manager styling (4.34) Now playing

Once you are designing your page, see how device manager works in Wabli, and how you can design your page to be rendered nice in different devices ( tablet, mobile, desktop ).

Layer manager (1.48) Now playing

Once you are designing your page, see how layer manager works in Wabli, and how you can spectate the positions of all the components in the Wabli editor.

Clear, undo, redo, fullscreen (1.43) Now playing

See how you can use some basic actions, inside your Wabli build application editor, such as clear editor, undo, redo and entering in fullscreen mode.

Component's basic actions (1.51) Now playing

Once you are designing your page, and you have selected an inside component, see what basic actions Wabli offers (duplicate component, delete component, select parent component, move component and annotate component)

Preview mode (0.57) Now playing

See how you enter in preview mode, when you are designing a page, and see how your page looks like in deployed conditions.

Enable absolute movement (2.50) Now playing

Once you are designing your page, see how you can enable absolute movement of all your components in the Wabli editor.

Create data element wrapper (5.54) Now playing

See what a data element wrapper is, how to create it inside a page and how to use it.

Create service wrapper (2.59) Now playing

See what a service wrapper is, how to create it inside a page and how to use it.

Inject custom code (2.39) Now playing

Once you are designing your page, see how you can inject custom code, html or javascript scripts in your page.

Actions & annotations

External transition (1.56) Now playing

Once you are designing your page, see how you can add to a component the ability to navigate to external url when you press on it, on the deployed project.

Simple transition (2.06) Now playing

Once you are designing your page, see how you can add to a component the ability to navigate to another page when you press on it, on the deployed project.

Previous page button (1.27) Now playing

Once you are designing your page, see how you can add to a component the ability to navigate to previous page when you press on it, on the deployed project.

Add attribute annotation type (4.30) Now playing

Once you are designing your page, and you want to annotate a component, see how you can add to it an annotation of attribute type and what annotation attribute types Wabli offers.

Annotation create method (4.01) Now playing

Once you are designing your page, see how you can add an annotation create method to a selected component.

Annotation delete method inside get method (1.53) Now playing

Once you are designing your page, see how you can add an annotation delete method to a selected component, inside an annotation get method

Annotation delete method inside get all method (2.43) Now playing

Once you are designing your page, see how you can add an annotation delete method to a selected component, inside an annotation get all method

Annotation get all method (3.54) Now playing

Once you are designing your page, see how you can add an annotation get all method to a selected component.

Annotation get method (4.53) Now playing

Once you are designing your page, see how you can add an annotation get method to a selected component.

Pagination inside get all annotation method (4.59) Now playing

Once you are designing your page, see what pagination options Wabli offers and how to use a pagination inside an annotation get all method.

Transition by id inside get or get all annotation method (2.32) Now playing

Once you are designing your page, see how you can define a simple transition with id, inside a get or get all annotation method.

Annotation update method (3.15) Now playing

Once you are designing your page, see how you can add an annotation update method to a selected component.

Add table of subentities inside annotation create method (4.19) Now playing

Once you are designing your page, see how to can add multiple connected subentities inside annotation create method.

Attach one subentity inside annotation create method (3.59) Now playing

Once you are designing your page, see how to can add one connected subentity inside annotation create method.

Render table of subentities inside annotation get method (5.06) Now playing

Once you are designing your page, see how to can render multiple connected subentities inside annotation get method.

Render table of subentities inside annotation get all method (3.12) Now playing

Once you are designing your page, see how to can render multiple connected subentities inside annotation get all method.

Render subentity inside annotation get all method (3.16) Now playing

Once you are designing your page, see how to can render one connected subentity inside annotation get all method.

Render subentity inside annotation get method (2.02) Now playing

Once you are designing your page, see how to can render one connected subentity inside annotation get method.

Transition by id inside subentity or table with subentities (3.17) Now playing

Once you are designing your page, see how you can define a simple transition with id, inside a subentitiy or a table with subentities.

Attach custom javascript(2.40) Now playing

Once you are designing your page, see how you can attach custom javascript scripts to components.

Annotate simple subentity inside update method (2.54) Now playing

Once you are designing your page, see how you can annotate a simple subentitiy that is being used inside an update method.

Annotate table with subentities inside update method (4.00) Now playing

Once you are designing your page, see how you can annotate a table with subentities that is being used inside an update method.

General project's actions

View export code (2.24) Now playing

Once you are designing your page, see how you can view the produced code (html, css, js) of your page.

View annotations icon (1.02) Now playing

Once you are designing your page, and you have add some annotation, see how to view all your page's annotations.

Display data model (2.27) Now playing

Once you are designing your project, and you have annotated the pages of your project, see how you can view data model for every page of your project, and for your project as well.

View data flow (2.21) Now playing

Once you are inside a project, and you have add transitions between pages, see how to view all the transitions for every page and for whole your project.

Synchronize to Github (0.59) Now playing

Once you have finished designing your project, see how you can synchronize the project to Github.

Wabli export options (3.07) Now playing

Once you have finished designing your project, and you want to download your project, see what export options Wabli offers ( export project's css, html, produced server and front sdk ).

Quality of code (3.08) Now playing

Once you are designing your project, see how you can analyze the quality of your project and view the results.

Wabli deployment options (2.50) Now playing

Once you have finished designing your project, see what deployment options Wabli offers.