Skip to main content

Text Overview

  1. Navigate to HSYCO Manager

  2. Create a new project or open an existing one

  1. Go to Home page

  1. Click "add"

  1. Add a "Text" object

  1. Go back to "edit" mode

  1. You can align the button in the middle of the page by clicking "Align" and then "Center Vertically" and "Center Horizontally"

  1. Give the text area an ID ("textarea" for example)

  1. Change the "Text" to "Text to be changed"

10. Check the "Selectable" checkbox. This makes the text selectable with the mouse

11. Check the "Auto Links" checkbox. This detect URLs, Emails and Phone numbers and displays them as hyperlinks

Tip: Now we'll add a button that, when pressed, changes the text displayed

  1. Click "add"

  1. Add a "Button"

  1. Click "edit"

  1. You can align the button like we did before with the text object by clicking "Align"

  1. Change the "Label" to "Press to change the text"

17. Change the "Action" to "command". We'll capture this command and set the new text in the text object

  1. Change the "Name" to "changetext"

19. Change also the "Parameter" to "changetext". Note that this two values could be any string, also different from each other

  1. Click "Save" to save the project

Tip: Now we'll write some code to capture the command and change the text displayed

  1. Go to "File Manager"

  1. Navigate into the "events" folder

  1. Click "New File"

  1. Give it a name ("text.txt" for example) and click "New File"

**25. Now copy the following code into the file and save it:

function userCommand(session, userid, name, param) : {
    if(name.equals("changetext")){
        uiSet("textarea", "text", "Text Changed<br>Example URL: www.example.com");
    }
}

What this does is it changes the text displayed of the text object with ID "textarea" only if the name of the command is "changetext", which we set earlier**

  1. Now go back into the "Project Editor" and click "Run" then "Default" to launch the application

  1. The page should look like this:

  1. Press the button

29. As you can see, the text displayed changes. Also, the URL has been recognized and shown as a hyperlink, because we set the "Auto Links" attribute to true