How to use UserFunction

Members

(constant) Assign a custom function

Used to assign a custom function to the UserFunction instance.

Example
#Example 2: Create a function to perform substraction operation 
# 1.When coding, you can dynamically assign a function to the UserFunction instance.
# 2. then entry the below code 
        UserFunction.Subtraction=(subtractor1, subtractor2) => {
            try {
                return subtractor1 - subtractor2;
            } catch (error) {
                // Code to handle the error
                console.error('An error occurred:', error.message);
            }};
// Usage
        const result =  UserFunction.Subtraction(1,3);
        console.log(result);

(constant) Assign a new component to the UserFunction

Used to assign a new component to the UserFunction Instance

Example
# Example 4: Assign a new component to the UserFunction
# 1. In AppStudio, navigate to the Function Tab, click the +New function button and name it as Face.
# 2. Then enter the below code:
        class Face extends TComponents.Component_A {
            constructor(parent, props = {}) {
                super(parent, props);
                this.loadCss();
            }

            defaultProps() {
                return {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    zIndex:999
                };
            }

            mapComponents() {
                const eye1 = new TComponents.Button(this.find('.eye1'), {
                    text:'',
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    backgroundColor:"black",
                    border:"10px solid white"
                });
                const eye2 = new TComponents.Button(this.find('.eye2'), {
                    text:'',
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    backgroundColor:"black",
                    border:"10px solid white"
                });
                const mouth = new TComponents.Button(this.find('.mouth'), {
                    text:'',
                    width: 40,
                    height: 20,
                    borderRadius: 20,
                    border:"2px solid #dbdbdb"
                });

                return {
                    eye1,
                    eye2,
                    mouth
                };
            }

            markup() {
                return `
                    <div class="tc-face">
                        <div class="eyes">
                                <div class="eye1"></div>
                                <div class="eye2"></div>
                        </div>
                        <div class="mouth"></div>
                    </div>
                `;
            }

            loadCss() {
                Face.loadCssClassFromString(`
                    .tc-face {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 100px;
                        height: 100px;
                        background-color: var(--fp-color-BLACK-OPACITY-4);
                        border-radius: 20px;
                        padding:8px;
                    }
                    .tc-face .eyes{
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        padding: 5px 0;
                    }
                    .tc-face .mouth {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 40px;
                    }
                `);
            }
        }

        // Usage
        // create face
        var face = new UserFunction.Face(
           document.querySelector('body'),
        );
        face.render();

(constant) Assign an object to the UserFunction

Used to assign an object to the UserFunction instance.

Example
# Example 3: Assign an object to the UserFunction
# 1. In AppStudio, navigate to the User Function, click the +New function button and name it as Robot.
# 2. Then enter the below code:
        class Robot {
            constructor(name, model) {
            this.name = name;
            this.model = model;
            this.isMotorOn = false;
            }

            motorOn() {
            this.isMotorOn = true;
            console.log(`${this.name} motor is now ON.`);
            }

            motorOff() {
            this.isMotorOn = false;
            console.log(`${this.name} motor is now OFF.`);
            }

            getSystemInfo() {
            return `Robot Name: ${this.name}, Model: ${this.model}, Motor Status: ${this.isMotorOn ? 'ON' : 'OFF'}`;
            }
        }
// Usage
const myRobot = new UserFunction.Robot('Alpha', 'X1000');
myRobot.motorOn();
console.log(myRobot.getSystemInfo());
myRobot.motorOff();
console.log(myRobot.getSystemInfo());

(constant) Create a new user function

Used to create a new user function.

Example
# Example 1: Create a function to perform addition operation 
# 1.In AppStudio, navigate to the Function tab, click the +New function template button, and name it as Add.
# 2. then entry the below code 
        (add1, add2) => {
            try {
                return add1 + add2;
            } catch (error) {
                // Code to handle the error
                console.error('An error occurred:', error.message);
            }
        }
// Usage
      const result =  UserFunction.Add(1,3);
      console.log(result);