If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to add custom icons, edit the source code of your application, and create your own custom sources.

Before you begin

Tutorial level: intermediate.
Prerequisites: an Appery.io account.

Creating a new app

  1. First, create a new project.
  2. In Project view, open Pages >startScreen.
  3. Go to startScreen, and drag and drop the Button component from the PALETTE into the page.
  4. In the PROPERTIES panel, select the icon “Left-arrow”.
  5. Save the project.Create

Custom files & editing source code

You can add and change the source code via the steps below:

1. Switch to the Source tab:
SourceTab

2. You can see the folders that contain platform-specific resources. By editing these resources, you can influence the results of code generation:
SourceTabOpened

3. Open the folder WEB_RESOURCES/files/resources/image/ and click the “cog” icon to upload the custom icon for your button:
UploadFolder

4. 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:
UploadFiles

5. Now we can use this icon in our custom CSS. Select CREATE NEW > CSS, and add the following:

Where: Skype-icon1.png is your uploaded file and skype-icon is the class name (you can name your class as you wish).

6. Go to the visual builder, and for the button, enter the Class Name property skype-icon (or enter your class):
Skype_icon

7. Now you need to change a source file. Open the startScreen.html file in the WEB_RESOURCES folder:
StartScreen

8. Add a paragraph with some text below the button you created in the visual builder:
SomeText

9. The names of the generated resources are initially black, while the names of the created, uploaded or changed resources are blue:
BlueColored

10. Now we’ll preview the changes. Click “Save”, and then click “Test”. The button has the icon you uploaded, and underneath, there’s the text you added to the source file:
Preview

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

For example, add one more button component to the page:OneMoreButton

Save everything, and go to the preview. You won’t see the new button:
Preview

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 editor, delete edited (blue colored file) and click “Undo all source changes” for folder with edited files:
UndoChanges

Managing files and folders

Let’s create a new file in the WEB_RESOURCES folder:

1. Click the icon to the right of the WEB_RESOURCES folder, and select “Create file”. Name it file1:
CreateFile

2. To proceed, create another file called file2. You can create more folders the same way.

3. Create a folder called folder1:
Folder1

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.

4. For example, move file1 to folder1. To do this, click the icon to the right of the file name, and select “Move”:
MoveFile

5. Select folder1 and click “Move”:
MoveFileTree

The file has been moved to the specified folder:
FileMoved

6. To upload files to a folder, select “Upload to this folder”:
UploadImage

7. In the open window, check the source (files or ZIP bundle) and select files to be uploaded:
UploadFiles

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:
ZipFiles

8. It’s easy to delete files too; delete file2. Select “Delete” from the menu, and confirm the deletion:
DeleteFile

As you can see, file2 is no longer present in the tree:
FileDeleted

Restoring files and folders

If you accidentally delete any generated file or folder, you can restore it.

For example, let’s delete the startScreen.js file. If you want to restore it, you should select “Undo all source changes” from the WEB_RESOURCES menu:
UndoAllSourceChanges

The startScreen.js file is restored and is again present in the tree:
FileUndeleted

All the added and edited files have not been changed.

It is important to remember that you can restore only generated files, not custom files. After saving the project, all edited source files become custom.

Root folders (ANDROID, IOS, WEB_RESOURCES) have another feature. You can refresh the data in any of them 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:
Refresh

You should now be comfortable with creating, uploading, changing, deleting, and restoring generated and custom files.