AppGyver is a Low-code no-code platform with which you can build apps quickly. The Drag-and-drop flow functions library in AppGyver gives you easy access to the various flow functions which you can add to your app but sometimes as per the requirement you need more than just the flow and formula functions.
In this blog I will try to explain if we really need to write a custom logic and formula how we can do it in AppGyver a Low code/No code platform.
It would be ideal if you have already finished reading shibaji.chandra5 excellent blog post or if you could rapidly onboard yourself on AppGyver, by referring mohini.verma handy article.
Doing any of the above, you can easily create an application from the AppGyver project canvas and have ended up in the main section of Composer pro.
Before we get started, I'd like to explain what we're hoping to accomplish. Just to get a sense of the concept, we're aiming to construct a very simple app that takes user input and determine whether it's a number and if it is, whether it's even or odd.
Let’s proceed step by step
Let's utilise the WISWIG tools to create your project's view component by dragging and dropping controls in the main area.
Change the title to "Custom code" and then remove the previous paragraph. Now let's add form elements an input field and a Button. Last but not least, include a standard paragraph component.
For the page, we'll need two variables: one for the text field, which will accept user input, and another for the paragraph component, which will display the result.
Create a page variant called input type Number and result type text in the Variable editor.
The input field and paragraph must be bound to the declared variable.
Toggle to the view editor. Select the Input control and the value field from the property pane.
To connect value property with input page variable, choose binding type "Data and Variable" > "Page variable."
Similarly, you can bind the Content attribute of the paragraph field to the result page variable.
Now that the input field and paragraph are tied to the page variable, we can add some logic. When we need to perform an action and logic, we can use the Logic and Flow function.
In our situation, we'd like to include logic on the "Check" button press.To do so, open the Flow Logic Editor by selecting the "Check" button from the canvas.
Drag and drop javascript node onto the logic canvas, connect it to Component Tap and double-click on it to open the JavaScript node configuration model.
JavaScript node configuration model allows us to write a code. This window is divided into 3 areas Inputs setting area, Coding area, and Outputs setting area.
Inputs setting area help you to define variable to bring data from your app state into the function execution context
Outputs setting area help to describe what data is available after the function has completed its execution
Function syntax and execution help to write code and how it is run during app runtime
This coding might not be really meaningful, but I've coded this simple program in order to just get an overview of the feature of custom Javascript code.
Also If you'd like to read more, can refer
https://docs.appgyver.com/app-logic/custom-javascript
In this blog I will try to explain if we really need to write a custom logic and formula how we can do it in AppGyver a Low code/No code platform.
Prerequisite
It would be ideal if you have already finished reading shibaji.chandra5 excellent blog post or if you could rapidly onboard yourself on AppGyver, by referring mohini.verma handy article.
Doing any of the above, you can easily create an application from the AppGyver project canvas and have ended up in the main section of Composer pro.
Before we get started, I'd like to explain what we're hoping to accomplish. Just to get a sense of the concept, we're aiming to construct a very simple app that takes user input and determine whether it's a number and if it is, whether it's even or odd.
Let’s proceed step by step
Let's utilise the WISWIG tools to create your project's view component by dragging and dropping controls in the main area.
Step 1: Creating a UI screen
Change the title to "Custom code" and then remove the previous paragraph. Now let's add form elements an input field and a Button. Last but not least, include a standard paragraph component.
Step 2: Add Page Variable
For the page, we'll need two variables: one for the text field, which will accept user input, and another for the paragraph component, which will display the result.
Create a page variant called input type Number and result type text in the Variable editor.
Step 3: Bind Page Components to Page Variable
The input field and paragraph must be bound to the declared variable.
Toggle to the view editor. Select the Input control and the value field from the property pane.
To connect value property with input page variable, choose binding type "Data and Variable" > "Page variable."
Similarly, you can bind the Content attribute of the paragraph field to the result page variable.
Step 4: Add Logic and Flow Function
Now that the input field and paragraph are tied to the page variable, we can add some logic. When we need to perform an action and logic, we can use the Logic and Flow function.
In our situation, we'd like to include logic on the "Check" button press.To do so, open the Flow Logic Editor by selecting the "Check" button from the canvas.
Drag and drop javascript node onto the logic canvas, connect it to Component Tap and double-click on it to open the JavaScript node configuration model.
Step 4: Write your custom logic
JavaScript node configuration model allows us to write a code. This window is divided into 3 areas Inputs setting area, Coding area, and Outputs setting area.
Inputs setting area help you to define variable to bring data from your app state into the function execution context
Outputs setting area help to describe what data is available after the function has completed its execution
Function syntax and execution help to write code and how it is run during app runtime
At first, let's set the input. In this case you can use page variable as input value. Click on input1 value icon and select binding type "Data and Variable" > "Page variable" to bind value property with input page variable and copy paste the below mentioned code in CODING area.
const value = Number(inputs.input1)
if(isNaN(value)){
return { result : ` "${inputs.input1}" is not a number`}
}else{
let msg = value % 2 == 0 ? `"${value}" is a even number` :
`"${value}" is a Odd number`
return { result: msg}
}
This coding might not be really meaningful, but I've coded this simple program in order to just get an overview of the feature of custom Javascript code.
Below image shows you how we can refer defined input variable in code area and how function return the value of variable msg as an output result after the function has completed its execution.
Press Update Button to update Javascript function node.
Step 5: Set JavaScript node result in page variable
Bind INPUTS - Variable name with Result page variable and Click on Assigned value icon and select binding type "Output value of another node" to bind value property with node output Function/ result.
Step 6: Launching the application and testing
Developing the application is finished so press on save button to save all your task then Click on LAUNCH icon to test your application
Select your option to test your app on Web or on Mobile.
Application looks similar as shown in below image. when you press the check button its show even or odd as expected. when we input string it shows enter value is not a number.
Impression/conclusion
Almost all functions used in custom Javascript are available in the formula, so it might not be really necessary to create the Custom Javascript component like this. However it would be useful to avoid writing complex and long statement in the formula.
Currently Javascript function node supports all es6 features, from arrow functions to Object destructuring and so on. Some Javascript APIs such as fetch and moment are currently exposed in the runtime context. The execution context is wrapped inside an async function, so you can use the await keyword on the root level directly.
Also If you'd like to read more, can refer
https://docs.appgyver.com/app-logic/custom-javascript
- SAP Managed Tags:
1 Comment
