Your First Component

Make a simple component to get acquainted with the flow.

Create a Project

Open Creators Studio and create a New Project. Give it a name and write a summary.

Then choose My Component from the list of projects and open in a Basic sandbox.

Edit the Structure

Expand the my-component folder on the workspace and you will see the folder structure of the template project.

We have two components here: a UI component (this is a simple example-button that sends input massage to output without changes) and a functional component (example-uppercase converts input string to uppercase).

Click app-component.json and you will see how these components look like and behave on the Apps Editor table and on UI preview.

You see the flow: a UI input-string element that on the preview takes a string, then the UI example-button that sends this string to the example-uppercase (without UI), and the result goes to the UI output.

Note: you can adjust the UI Layouts with the EDIT WIDGECTS button. Click SAVE after editing.

Rename the components' folders and files in subfolders to make the project clearer. Let it be pass-button and lowercase as far as we a going to save the button function (just to pass the message) and change the non-ui component function. Right-click on folders and files and rename them.

As you can see, we didn't change the icons file names. That's because we are going to replace them completely.

Edit config.json

All the project structure is registered here.

Update the folders and file names.

Edit component.js

The button will remain a pass-button, so we're not going to change its function in the pass-button.js file.

But we have to change the function of example-uppercase to make it lowercase.

Change the toUpperCase() method to toLowerCase() first. Rename the TemplateNode function to LowercaseComponent.

Then don't forget to change the name we use to register the project components in config.js from example-uppercase to lowercase.

And don't forget to update the function name, the registerType name, and the name value in the control object of pass-button.js as well.

After updating the project's files you can test the result any time by pressing Apply Changes in the app-component.json file testing interface. Make sure you replaced obsolete example-button and example-uppercase on the workspace with updated components from the palette.

Edit ui/component.vue and styles.scss

Apps Editor uses Vue.js to build UI components.

We can change the behavior and appearance of pass-button's UI in the pass-button.vue file.

The .vue file consists of three parts. We will not change

<template> 
    <!-- all the markup structure and logic of the component -->
</template>    

and

<script>
    // all of the non-display logic of the component
</script>

Change the color of pass-button in the styles.scss from #67b231 to blue or any other you like.

Edit component.html

Let's change the properties of components for Apps Builder.

Main Definitions

In the first <script> </script> block change some definitions that are registered with the editor.

• First, update the component registerType and label (1). The label shows the component`s name on the editor table.

• Change the component's category on the palette to custom (or any you want) (2).

• Change the components color in the editor (3). Since this is the function-like component, use the #8c58e9 color for it.

• Change the icon (4) for the editor view. You can drag-and-drop your own icon file to the icon folder and use it. In this case, let's use Font Awesome link for an icon. For example, fa-arrow-down.

• At last, add the line paletteLabel: 'lowercase', (after the icon line, for example) (5):

Open app-component.json and Apply Changes to check if everything is as expected.

And don't forget to make appropriate changes in pass-button.html.

Edit Template

When you double-click on a component on the workspace of Apps Editor you can change its properties. We can update this window's appearance in the second <script> </script> block.

Double-click on your lowercase component to view how it looks like in Apps Editor. As we haven't updated the properties block yet (it's still referring to example-uppercase), here we see nothing.

The entire properties appearance block must be named as the component (4).

The first property is displayed with an icon (2), property name (3), and an input field with a placeholder (4).

Update lowercase.html:

Update the name of the block (1) to match the registering name.

Change the icon (2) to fa fa-check, the property name (3) to Label, the placeholder (4) to Type the Name here. Then copy and past couple of <div> </div> blocks from the second <script> </script> part of pass-button.html just for fun.

Don't forget to update the data-template-name value (1) in pass-button.html to match the registering name.

Apply changes. Check the pass-button component properties, then lowercase properties.

Note that the two new properties that we added are not functional. To make them functional you have to update the Main Definitions the .js file accordingly.

Help Text

In the third <script> </script> block update the description of the component function and the block name. Our component lowers the characters.

The result will be:

Don't forget about pass-button Help!

Test the Component

A testing tool is embedded in the template. Click app-component.json to open the testing flow and UI previewer. After you changed the components' registering names the template components on the workspace are obsolete. Replace them with new pass-button and lowercase components (if you haven't done it yet), connect and set up them and click Deploy.

Now you are able to test the components in the workspace and UI previewer.

Make a Release

Make a Quick Release

When everything looks and works right we are ready to make a release and use the components in other projects.

Click Quick Release (1), choose the project, and release it. After that open Quick Release Status (2) and wait till the status become Completed.

The Quick Release method gives the number and name to the release automatically. To do this manually make an ordinary Release with Build stage.

Create an App Project

To use the components open o create a new application project. Choose AOS Cloud Runtime and Dashboard type.

Open this project and click Install Component.

Choose the Project to install and the Release version, then click Install.

Reload the page and new components will appear on the palette.

Put it to the Marketplace

The components are available for you to use in any app project. To share them with other organizations publish them on the Marketplace. View this tutorial.

But please don't publish this particular project on the Marketplace. Make a new valuable one first.