Create A Function

Creating a function is incredibly simple! You define what inputs your function will accept, add some logic to process those inputs into a result and that's it. The Webfuncs framework will create the interface and underlying mechanism to operate this function. You can prepare your function for use by adding a rich description, manage versions for logic updates, access and more.

Lets explore how you go about creating a function using the BMI example. Body Mass Index (BMI) is a health metric that assigns a numeric value to a person's weight relative to their height. We will discuss step-by-step details to create this function. By the end of this exercise you should have your own functioning BMI calculator.

Please note that you need to be logged in to create a function. It is recommended to build your function side by side with this short tutorial. Open a new window in your favourite browser, place it next to this tutorial and start creating!



New Function

From your drop-down user menu (top right of window), select 'Functions'. This should open your Functions page with listing of all functions you have created. If you are just starting out this may be blank but don't worry, pretty soon it will have your very own first function! Click 'Create New Function' button (right below 'My Functions') to start the process. This will open up a new page where you can enter the details of what your function is intended for. It has following sections:

  1. Function Title: Give your function a title that describes its purpose. For this function, let's use Body Mass Index (BMI)

    Note that search for functions will look in titles, so adding terms that define the purpose of this function will help look for this function in searches. For example adding 'BMI' in title will enable this function to be listed in results for search for 'BMI'.

  2. Function Description: Short or detailed description that will help users to understand the purpose and usage of this function. The editor for function description has tools for formatting and adding other features (links, formulas). Let's add My BMI calculator for now. You can always come back and change this.
  3. Function Tags: We define category tags for our function here. Search option for this input helps to look for existing categories or we can add a new category. Let's add health for our BMI function. You can always come back and change this.
Hit 'Save' button to upload these changes. You should see your function page with the details we added in steps above.

Function Setup

In previous step we created a new function which should be available in your functions menu ('Functions' under user menu). This function is not usable yet as we haven't defined what the function needs to calculate BMI. We will add that now. On your BMI function page you will see a 'Create New Version' button. Click that to open the page for creating function logic. It has following sections:

  1. Function Inputs These are inputs for your function. For BMI we need height and weight of the person. Let's start with height. Click on 'New' button in 'Function Inputs' section. Once an input parameter is added, click the parameter to view/modify details.
    • Name: Input parameter name. Let's use Height for this.
    • Variable Name: Variable name to be used in function logic. Let's use height for this.
    • Description: Input parameter description. Let's use Height in cm for this.
    • Type: Input parameter type. Let's use Number for this.
    • Optional: Is the parameter optional. Leave unchecked.
    Click the 'Height' parameter to hide details. Add another parameter with following details:
    • Name: Weight
    • Variable Name: weight
    • Description: Weight in kg
    • Type: Number
    • Optional: Leave unchecked.
  2. Function Dependency: Other functions that are used by our function. Leave blank for now
  3. Result Type: Our BMI function returns numeric value so choose Number for this.
  4. Result Formatting: Choose Number, 2 decimals => 1,000.12 for this.
  5. Function Code: Code for function logic. This will take inputs defined above, calculate BMI and assingn that value to special keyword 'result'. Leave default (result = 0) and we can modify in next step
Hit 'Finish' to complete. You should see the page for this function (implementation) version. It shows the inputs as defined above, the function signature (input/output) and default code result = 0.

Function Logic

On the page for function (implementation) version we can input Height and Weight numbers to see the BMI result. Enter the following:

  • Height: 170
  • Weight: 70
The result is 0.00 as we haven't update the code yet. Hit 'Save Defaults' to save our input values and we will move on to update the function code. Scroll down to the code and modify code to
result = weight / (height/100 * height/100)
Hit the button above code editor box to save the code and update result. The result should read 24.22 now. And that's it, you have created your first working function!

Code for function logic is written in Javascript. Any valid Javascript code supported by modern browsers will work. There are few limitations though, the code will be synchronous and it will not support any DOM calls (alert, location etc.) for public use.

Features

Now that we have a working BMI function we add some features to our function. It would be good to have a chart of BMI for weight ranges that helps us visualize what weight ranges to target. We can do that by hitting button next to 'Weight' input. This will add a chart to our function. Now hit 'Save Defaults' and refresh the page. The chart should update now and we can modify the weight range to use for chart.
We have a visual representation of BMI now but what if were to indulge in some wishful thinking on height parameter (not that it's changing much for most of us). We could always change the height input but it may be convenient to add a slider for changing height rather than entering numbers. Hit the button next to 'Height' input and we have exactly that! Change the range of height you want to play with and you are good to go. Using slider should udate both result and chart.

In Use!

So far the functionality we have added to our function is still in development version. Ideally we may want to create multiple stubs with different inputs or share this function with other people. To do that we will need to release this version. Go ahead and hit 'Release This Version' to put this function in use. Now you have the option of making this function public or just sharing a private link with anyone.

Note that once a function is released, its input parameters and output type cannot be changed. You can modify the code with a new version as long as function signature (input/output) remains the same. You can always create a new function if you need to change the input/output.

Improvements

You can improve your function to appeal to wider users and learn some more features along the way. A few quick changes to upgrade our function would be:

  • Imporve the function description. Utilize the function description editor to provide more information and resources for further details.
  • Leverage other functions to allow height/weight input in units of user's choice (inches/pounds).
See BMI function for hints.