Skip to main content
This tutorial walks you through building and publishing a simple demo using the YiDA custom page feature. The end result looks like this: When the user enters a name in the input field and clicks the Generate button, the app automatically generates a greeting and displays it below the button. Every step is explained in detail. If you have questions about YiDA product features along the way, refer to the YiDA User Guide. Now let’s build the demo from scratch.
View the live demo at Hello Example, and inspect the implementation in the Custom Component Designer.

​
Step 1: Create a YiDA App

First, create an app in the YiDA workspace (see the User Guide for details). Skip this step if you already have an app to use. In the example below, we create a blank app named demo example:

​
Step 2: Create a Custom Page

Next, create a custom page to build the demo. Since we don’t need a page template for now, click Skip on the template selection screen to go directly to the custom page designer: The YiDA custom page designer is shown below. For a detailed feature overview, see the Designer Documentation. You can rename the current page after entering the designer:

​
Step 3: Drag In Components and Configure Attributes

Our demo is very simple and contains only three components. Drag them from the component library panel onto the canvas. For more component configuration options, see the Component Documentation:
  • Input Field — Used to enter the name. Set its Title attribute to “Name”.
  • Button — Used to read the input name and generate a greeting. Set its Title attribute to “Generate”.
  • Text — Used to display the greeting. For a better look, set the top margin to 20px and the font size to 20px in the style panel, as shown below.

​
Step 4: Create a Global Variable

From this step onward, we implement the logic. First, create a global variable to hold the greeting (for details on using global variables, see the Global Variable Documentation). Create a global variable named helloWord, as shown below:

​
Step 5: Bind the Button Click Event

When the user clicks the button, we need to read the input field content and display the generated greeting below it. This section explains how to bind the event and generate the greeting: 1. Bind a click event to the button. As shown below, a JS function is generated automatically in the action panel after binding (you can also customize the function name). 2. Use the getValue API to read the input field content. YiDA provides a rich set of YiDA JSAPIs. As shown below, retrieve the user input using the unique identifier of the input field component: 3. Construct the greeting, then use the setState API to update the global variable and trigger a page re-render. The complete code for onClick is as follows:

​
Step 6: Bind the Text to the Data Source Variable

In the final step, bind the global variable to the Content attribute of the Text component for display, as shown below:

​
Step 7: Preview and Publish

The demo is now complete. Click the Preview button in the upper-right corner of the designer to preview it: After previewing, click Save to save the page. Then click the Access button in the upper-right corner of the app to open the demo page you just built:

​
Conclusion

You have now completed the Quickstart demo. Visit Hello Example to see the live result. This example introduces the basic workflow of YiDA custom pages. For a more advanced tutorial, see the TodoMVC Tutorial.