Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Source Code Editing

Editing app source code.

In addition to Appery.io App Builder visual tools, you can also edit app source files. This page shows what you need to know when editing source files directly.

Source Editing

Editing the sources directly is meant in situations where you need to customize the app or a page which is not possible using the visual tools. We recommend editing the source files directly only when absolutely necessary.

Custom Files and Editing Source Code

This allows you to add and change the source code. In order to do this you will need to switch to the Source tab.

Switching to this view allows you to see the folders, which contain platform specific resources. Editing these resources allows you to influence the rest of the code in the generation.

Open the folder WEB_RESOURCES/files/resources/image/ and click on the cog icon to upload the custom icon for your button.

Select the file to be uploaded. You can choose a zip bundle, and when it’s uploaded, it’ll be unzipped and all its folders and files will be added to the folder.

Now we can use this icon in our custom CSS. Select CREATE NEW > CSS and add the following code where Skype-icon1.png is in your uploaded file and skype-icon is the class name.

.skype - icon: after {
    background - image: url('../../../resources/image/Skype-icon1.png');
    background - size: 22 px;
}

Go to the visual builder, and for the button, enter the Class Name property skype-icon, or enter the class you created. This means that when you go back to the source file you can change the startScreen.html, or the file of your choice.

You need to select the source file so that you can insert a paragraph below the button, which you created in the App Builder:

To distinguish from the generated from the created resources, the generated are initially black, while the created, uploaded, or changed resources are blue.

Tip

We recommend previewing the stages by saving your work and clicking Test.

Seeing the Changes

It’s important to remember that if you try to make any changes in the visual builder after you have edited the source file, the changes won’t be seen.

You cannot make any changes in the visual builder after you have edited the source code hence, all the necessary changes in the code should be made at the very end of the UI design.

If you want to continue editing app through the editor, delete edited (blue colored files) and click Undo all source changes for folder with edited files:

Managing Files and Folders

Files and folders are easy to manage. You can move files to folders and folders to folders, create subfolders, upload files and archives to folders, and delete each as well.

To move a file select the file, click the cog icon and select Move.

You need to select a folder to move your file to complete this process and add it to your source tree.

It is a similar process to upload files.
To upload a file select the file, click the cog icon and select Upload to this Folder

It will an open window. Check the source (files or ZIP bundle) and select files to be uploaded. If you choose a ZIP bundle, when it’s uploaded it’ll be unzipped and all its folders and files will be added to the folder you chose earlier.

If you want to delete the file(s) you have uploaded, simply click the cog icon next to the file and select Delete. This will remove that file from your tree.

Restoring Files and Folders

If you accidently delete or destroy files you can still recover them, for example:

If you deleted the start screen startScreen.js file, you can restore it by clicking on the WEB_RESOURCES menu:

Your restored file has been added to the tree again.

Root folders (CORDOVA, ANDROID, IOS, WEB_RESOURCES) have a feature that allows you to refresh the data in any of the above to update the source tree.

For example, let’s refresh the WEB_RESOURCES. To do this, you should select Refresh from the WEB_RESOURCES menu.

Source Code Editing


Editing app source code.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.