Axure Tutorial: Functions Self-Check Table (Full Guide)
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
Today, I will share with you the function self-check table, which contains all the commonly used functions in Axure. Each function has corresponding descriptions and application templates. You can learn from the function self-check table, or you can use it as a memo to check when you need it.
I also provide a case template that you can view or download at the bottom of the article
1. Widget functions
This: refers to the current widget, usually used with other functions, such as: This.x, This.y, This.text, This.width, This.height, you can quickly get the value specified by the current widget.
Target: refers to the target widget, which is generally used with other functions, such as Target.x, Target.y, Target.text, Target.width, This.height, to quickly obtain the value specified by the target widget.
x: The coordinate value corresponding to the x-axis, for example: This.x, Target.x, Cursor.x, LVAR1.x...
y: The value corresponding to the y-axis, for example: This.y, Target.y, Cursor.y, LVAR1.y…
width: Get the width of the object, for example: This.width, Target.width, LVAR1.height, Window.height…
height: Get the width of the object, for example: This.height, Target.height, LVAR1.height, Window.height…
scrollX: Get the horizontal scrolling distance of the object, usually a dynamic panel or a browser window.
scrollY: Get the vertical scrolling distance of the object, usually a dynamic panel or a browser window.
text: Get the text of the object, for example: This.text, Target.text, LVAR1.text...
name: Get the name of the custom name of the widget, for example: This.name, Target.name, LVAR1.name...
Top: Get the y-coordinate value of the upper border of the widget. For example This.top, Target.top, LVAR1.top...
left: Get the x-coordinate value of the left border of the widget. For example This.left, Target.left, LVAR1.left...
right: Get the x-coordinate value of the right border of the widget (the x-coordinate value of the widget + the width of the component). For example This.right, Target.right, LVAR1.right...
bottom: Get the y-coordinate value of the lower border of the widget (the y-coordinate value of the widget + the height of the widget). For example This.bottom, Target.bottom, LVAR1.bottom...
opacity: the opacity of the widget, between 0-100%, the smaller the number, the greater the transparency, the larger the number, the less transparency, 0 is full transparency, 100% is completely opaque.
rotation: Get the angle by which the widget has been rotated.
2. Page function
PageName: Get the name of the current page, which can be used as a tab. You will not need to fill in page name yourself, just copy and paste it.
3. Window functions
Window.width: Get the width of the current window, often used to set background adaptation and other scenarios.
Window.height: Get the height of the current window, often used to set background adaptation and other scenarios.
Window.scrollX: The horizontal scroll distance of the page, often used to make anchor menus.
Window.scrollY: The vertical scroll distance of the page, often used to make anchor menus.
4. Mouse (pointer) functions
Cursor.x: The X-axis coordinate of the position of the mouse pointer on the page, which is often used for the interaction of widgets following the mouse pointer.
Cursor.y: The Y-axis coordinate of the position of the mouse pointer on the page, which is often used for the interaction of widgets following the mouse pointer.
DragX: The horizontal dragged distance (1 millisecond). Generally speaking, this function is only used to judge the drag direction, not the drag distance. If the value is positive, means dragged to the right; if Negative, means drag to the left.
TotalDragX: The total number of horizontal dragged distances of widgets, that is, the distance on the x-axis from the start of dragging the widgets to the end of the dragging widgets. Similarly, if the value is positive, means dragged to the right; if it is negative, means dragged to the left, the specific value represents the horizontal distance of the drag.
DragY: The vertical dragged distance (1 millisecond). Generally speaking, this function is only used to judge the drag direction, not the drag distance. If the value is positive, means dragged downward; if Negative, means dragged upward.
TotalDragY: The total number of vertical dragged distances of widgets, that is, the distance on the y-axis from the start of dragging the widgets to the end of the dragging widgets. Similarly, if the value is positive, means dragged downward; if it is negative, means dragged upward, the specific value represents the vertical distance of the drag.
DragTime: the time the mouse drags a widget, that is, the total time from the start of dragging a widget to the end of dragging a widget. Note that the unit here is milliseconds, 1s=1000ms.
5. Digital functions
ToExponential: convert the numerical value to the exponential counting method. The complete formula is [[LVAR.toExponential (decimalPoints)]], and LVAR is a variable, in the case, it represents the text field for entering the numerical value, and decimalPoints represent the reserved decimal point. For example, take the value of 12345 as an exponent, the result with two decimal is 1.23e+4.
toFixed: The rounding function, which can round the number to a decimal with a specified number of digits, the complete formula is [[LVAR.toFixed(decimalPoints)]], LVAR is a variable, in the case represents the text of the text field, and decimalPoints represents the reserved decimal point. For example, the value of 1.2355 is used as the exponent, and the result with two decimal points is 1.24.
toPrecision: A function that converts a value to a specified number of digits, the decimal point is not included in the length. The complete formula is [[LVAR.toPrecision(length)]], LVAR is a variable, in the case it represents the text of the text field, and length represents the reserved decimal point. If the inputted length is greater than its own length, for example, the value is 12345 and the length is 7, a decimal point will be added automatically, and the result is 12345.00; if the inputted length is less than its own length, for example, the value is 12355 and the length is 3, it is converted to an exponent and automatically rounded to the nearest 1.24e+4.
6. String Functions
length: Get the length of the target text, that is, the number of characters; all characters (including numbers, English, and symbols) here are calculated as 1 length.
charAt(index): Get the character at the specified position in the target text. The complete formula is [[LVAR.charAt(index)]], LVAR is a variable, in the case it represents the text of the text field, and index represents the number of character obtained, here note that index starts from 0, that is, index=0, which means to get the first character; index=1, means to get the second character...
charCodeAt: Unicode encoding can be mainly used to determine whether the input content is numbers, English, or symbols. This function is often used to determine whether the type of content .
The complete formula is [[LVAR.charCodeAt(index)]], LVAR is a variable, in the case it represents the text of the text field, and index represents the number of character obtained. Note that index starts from 0, that is, index=0, which means to get the first character; index=1, means to get the second character...
concat('string'): String combination, combining two texts (strings) together, the complete formula is [[LVAR.concat('string')]], LVAR is the first text, the text in the case 1's text field, ('string') is the second text, in this case the text field of text 2.
Generally speaking, it is easier to combine with [[LVAR1.text]][[LVAR2.text]], so this function is less used, unless it is necessary to combine numbers to complete the calculation in one interaction, but in fact, it is easier to split into two parts., everyone can simply understand it.
indexOf: query the position of the first occurrence of the corresponding string in the target text. The complete formula is [[LVAR.indexOf('searchValue')]], LVAR is a variable, and in this case represents the text of the text field. searchValue represents the content of the search, in this case the text of the query content.
The query result is a number, starting from 0, that is, the result = 0, the query content is in the first position; the result = 1, the query content is in the second position... If the query content does not exist, the result = -1. So this function is often used for fuzzy search. If the result is >-1, there is a result.
replace: Replacement function, which can replace the specified characters in the text with new characters. The complete formula is [[LVAR.replace('searchvalue','newvalue')]], LVAR is a variable, representing the modified text paragraph, The text of the gray text field in the in the case; searchValue represents the searched character (character to be replaced), which is the text field on the left in the case; newvalue represents the new character after replacement, which is the content of the text field on the right in the case.
For example, searchvalue is good, and newvalue is smart. After clicking replace, all good characters in the above text paragraph will be replaced by smart. Pay attention to searchvalue and newvalue here. If it is a variable, it does not need quotation marks. If it is a fixed character, you need to keep the quotation marks.
It should be noted here that slices function also start from 0, that is, start=0, which corresponds to the first character of the text; start=1, which corresponds to the second character of the text, and so on... In addition, end can be left blank. If end is not filled, it will be intercepted from the beginning to the end, but the function needs to be changed to [[LVAR.slice(start)]].
substr: Get the specified start position from the target text and intercept a string of a certain length. The complete formula is [[LVAR.substr(start,length)]], LVAR is a variable, in the case, it represents the text paragraph at the upper left of the input; start get the start position of the text, length represents the length of the text to be obtained.
It should be noted here that the substring also starts from 0, that is, from=0, which corresponds to the first character of the text; from=1, which corresponds to the second character of the text, and so on... In addition, the ending to can be left blank. , if to is not filled, it will be intercepted from the beginning to the end, but the function needs to be changed to [[LVAR.substring(from)]]
split('separator', limit): Converts the characters in the current object that are the same as the separator characters into "," to form multiple groups of strings, and returns the specified number of groups starting from the left.
Parameter: separator is a separator character. The separator character can be empty. If it is empty, each character will be separated into groups; Limit is the number of returned groups. This parameter can be omitted, if this parameter is omitted, all string groups will be returned.
toLowerCase: Convert all uppercase letters in the target text to lowercase letters, the complete function is [[LVAR.toLowerCase()]], LVAR is a variable, corresponding to the target text.
toUpperCase: Convert all lowercase letters in the target text to uppercase letters, the complete function is [[LVAR.toUpperCase()]], LVAR is a variable, corresponding to the target text.
trim: Remove the space numbers at both ends of the target text. Note that only the space numbers at both ends can be removed. The space numbers in the middle of the text cannot be removed. The complete function is [[LVAR.trim()]], LVAR is a variable, corresponding to the target text .
toString: Converts a logical value to a string. No valuable cases have been found yet.
7. Mathematical functions
Math.sin(x): Get the sine value of the target radian value, x is a parameter, you can fill in a specific number, such as Math.sin(1.3), the result is 0.96. It can also be used in the same way as a variable, Math.sin(LVAR1).
Math.cos(x): Get the cosine value of the target radian value, x is a parameter, you can fill in a specific number, such as Math.cos(1.3), the result is 0.267. It can also be used in the same way as a variable, Math.cos(LVAR1).
Math.tan(x): Get the tangent value of the target radian value, x is a parameter, you can fill in a specific number, such as Math.sin(1.3), the result is 3.6. It can also be used in the same way as a variable, Math.tan(LVAR1).
Math.asin(x): Get the sine arc radian value of the target, the mathematical function is the inverse of the sine, y=arcsinx, which is the known sine value, reverse the angle, such as sin(a) = b, then arcsin(b) = a; its value is an angle expressed in radians. Domain: [-1, 1].
Math.acos(x): Get the arc cosine radian value of the target, the mathematical function is the inverse function of cosine, y=arccosx, is the known cosine value, reverse the angle, such as cos(a) = b, then arccos(b ) = a; its value is an angle expressed in radians. Domain: [-1, 1].
Math.atan(x): Get the arc tangent radian value of the target. The arc tangent function refers to the inverse function of the function y=tanx, denoted as y=arctanx or y=tan-1x, which is called the arc tangent function. It represents the only definite angle on (-π/2, π/2) whose tangent is equal to x, that is, tan(arctan x)=x, and the definition domain of the arc tangent function is R, which is (-∞, +∞).
Math.atan2 (y, x): obtain the radian value of the target coordinate (x, y), which is often used to calculate the angle value (radian value) between two points. Note here that the obtained radian value is not what we call the radian value. If it needs to be converted, it should be based on the original / π *180. The specific reason is the mathematical problem. If necessary, you can review the trigonometric function yourself.
Math.abs(x): Absolute value function, you can get the absolute value of the target number, x is the number that needs to take the absolute value, you can fill in the specific number, for example: Math.abs(-100), the result is 100 ; You can also fill in variables, such as Math.abs(LVAR1).
Math.ceil(x) : round up function to obtain the smallest integer greater than or equal to the target value, x is a parameter, you can fill in a specific number, such as Math.ceil(1.3), the result is 2. You can also use variables, Math.ceil(LVAR1).
Math.floor(x): Round down function to obtain the largest integer less than or equal to the target value, x is a parameter, you can fill in a specific number, such as Math.floor(1.3), the result is 1. You can also use a variable, Math.floor(LVAR1).
Math.exp(x): Exponential function, calculates the exponent with base e. e≈2.71828182845, x is a parameter, you can fill in specific numbers, such as Math.exp(1.3), the result is ≈3.669. Math.exp(LVAR1) can also be used as a variable.
Math.log(x) : Logarithmic function, calculates the logarithmic value of base e. In mathematics, it is generally recorded as lnx, e≈2.71828182845, x is a parameter (x>0), you can fill in specific numbers, such as Math.log(1.3), the result is ≈0.262. You can also use variables, Math.log(LVAR1).
Math.pow(x,y): Power function, calculates the y power of x, which is a power function with x as the base and y as the power, x and y as parameters, you can fill in specific numbers, such as Math.pow(2, 3), the result is 8. It can also be the same as the case, in the form of variables, Math.pow(LVAR1, LVAR2).
Math.max (x, y): you can compare multiple numbers and obtain the maximum value among the target values. Case 1:math.max (x, y) function can compare multiple numbers and obtain the maximum value in the target value. Different numbers can be separated by commas. For example, math Max (3,5,6,1,3,5,2), the result is 6.
Case 2: The Math.max(x,y) function can also compare multiple variables and obtain the maximum value among the variables, and separate variables with commas. For example Math.max(LVAR1, LVAR2, LVAR3).
Math.min(x,y): Can compare multiple numbers and get the minimum value in the target value, case 1: Math.min(x,y) function, you can compare multiple numbers and get the minimum value in the target value, different Separate the numbers with commas. For example Math.max(3,5,6,1,3,5,2), the result is 1.
Case 2: The Math.min(x,y) function can also compare multiple variables and obtain the minimum value among the variables, and separate variables with English commas. For example Math.min(LVAR1,LVAR2,LVAR3).
Math.random() : Random number function, draw a random number between 0 and 1.
8. Date & Time functions
NOW: Standard time function, get the current computer system standard time, including day of week, year, month, day, hour, minute, second, time zone, for example, Tue Apr 19 2022 16:44:04 GMT+1.
GenDate: Prototype generation time function, get the standard time of the current prototype generation (the last modification time of the current page), such as Tue Apr 19 2022 16:44:46 GMT+1.
getFullYear: year function, get the value of the year part of the current time, the complete function is Now.getFullYear().
Year: year function, get the value of the year part of the current time.
getMonth: month function, get the value of the month part of the current time (1-12), the complete function is Now.getMonth().
Month: month function, get the value of the month part of the current time (1-12).
getMonth: month function, get the English name of the current time month, the complete function is Now.getMonthName().
getDate: date function, get the value of the current date part of current time(1-31), the complete function is Now.getDate().
Day: date function, get the value of the date part of the current time (1-31).
getHours: hour hand function, get the value of the hour part of the current time, the complete function is Now.getHours().
Hours: Hour hand function, get the value of the hour part of the current time.
getMinutes: minute function, get the value of the minute part of the current time, the complete function is Now.getMinutes().
Minutes: minute function, get the value of the minute part of the current time.
getSeconds: second hand function, get the value of the second part of the current time, the complete function is Now.getSeconds().
Seconds: second hand function, get the value of the second part of the current time.
getMilliseconds: minute function, get the value of the millisecond part of the current time (1 second = 1000 milliseconds), the complete function is Now.getMilliseconds().
getTime: gets the number of milliseconds elapsed since 00:00:00 on January 1, 1970. The complete function is now getTime().
getTimezoneOffset(): Get the minute difference between the Universal Time Coordinated (UTC) and the current host time. The complete function is Now.getTimezoneOffset().
getUTCFullYear: Get the year of Universal Time Coordinated (UTC), the complete function is Now.getUTCFullYear().
getUTCMonth: get the month (0~11) of Universal Time Coordinated (UTC). Note that the obtained value 0 is January, 1 is February... 11 is December. The complete function is now getUTCMonth().
getUTCDay: Get the day of the week (0-6) in UTC, the complete function is Now.getUTCDay().
getUTCDate(): Get the date (1-31) of Universal Time Coordinated (UTC), the complete function is Now.getUTCDate().
getUTCHours: Get the hour of Universal Time Coordinated (UTC), the complete function is Now.getUTCHours().
getUTCMinutes: Get the minutes of Universal Time Coordinated (UTC) , the complete function is Now.getUTCMinutes().
getUTCSeconds: Get the seconds in UTC, the complete function is Now.getUTCSeconds().
getUTCMilliseconds: Get the number of milliseconds in UTC, the complete function is Now.getUTCMilliseconds().
Date.parse(datestring): Calculate the number of milliseconds between the specified time and January 1, 1970 00:00:00, often used to determine the size between two dates.
toDateString(): Get the current date as a string, the complete function is Now.toDateString().
toISOString(): Get the current date in IOS format (YYYY-MM-DDTHH:mm:ss.sssZ), the complete function is Now.toISOString().
toJSON(): Get the current date in JSON format (YYYY-MM-DDTHH:mm:ss.sssZ), the complete function is Now.toJSON().
toLocaleDateString() : Get the local date in string format (/MM/DD), the complete function is Now.toLocaleDateString().
toTimeString(): Get the current date and time zone in string format, the complete function is Now.toTimeString().
toUTCString(): Get the standard time of the current time in string format, the complete function is Now.toUTCString().
Date.UTC(year,month,day,hour,min,sec,millisec): Get the number of milliseconds between the specified time and UTC 00:00:00 on January 1,1970.
valueOf(): Get the original value of the current date, the complete function is Now.valueOf().
addYears(years): Year increase and decrease calculation function, the complete function is Now.addYears(years), years is a parameter, you can fill in specific numbers, such as addYears(3), to get the current time plus 3 years of specific time; here plus and minus signs represent addition and subtraction, such as addYears(-3), to get the specific time minus 3 years from the current time. It can also be written in the form of a function, addYears(LVAR1).
addMonths(months): month increase and decrease calculation function, the complete function is Now.addMonths(months), months is a parameter, you can fill in specific numbers, such as addMonths(3), to get the current time plus the specific time in March; here plus and minus signs represent addition and subtraction. For example, addMonths(-3) gets the current time minus the specific time in March. It can also be written in the form of a function.
addDays(days): Date increase and decrease calculation function, the complete function is Now.addDays(days), days is a parameter, you can fill in specific numbers, such as addDays(3), to get the specific time of the current time plus 3 days; here plus and minus signs represent addition and subtraction, such as addDays(-3) to get the specific time minus 3 days from the current time. It can also be written in the form of a function, addDays(LVAR1).
addHours(hours): hour increase and decrease calculation function, the complete function is Now.addHours(hours), hours is a parameter, you can fill in specific numbers, such as addHours(3), to get the specific time of the current time plus 3 hours; here plus and minus signs represent addition and subtraction. For example, addHours(-3) gets the specific time minus 3 hours from the current time. It can also be written in the form of a function, addHours(LVAR1).
addMinutes(minutes): minutes increase and decrease calculation function, the complete function is Now.addMinutes(minutes), minutes is a parameter, you can fill in specific numbers, such as addMinutes(3), to get the specific time of the current time plus 3 minutes; here plus and minus signs represent addition and subtraction. For example, addMinutes(-3) gets the specific time minus 3 minutes from the current time. It can also be written in the form of a function, addMinutes(LVAR1).
addSeconds(seconds): The calculation function for the increase and decrease of seconds, the complete function is Now.addSeconds(seconds), seconds is a parameter, you can fill in specific numbers, such as addSeconds(3), to get the specific time of the current time plus 3 seconds; here the plus and minus signs represent addition and subtraction, such as addSeconds(-3), to get the specific time minus 3 seconds from the current time. It can also be written in the form of a function, addSeconds(LVAR1).
addMilliseconds(ms): Millisecond increase and decrease calculation function, the complete function is Now.addMilliseconds(ms), ms is a parameter, you can fill in specific numbers, such as addMilliseconds(3), to get the current time plus 3 milliseconds of specific time; here plus and minus signs Represents addition and subtraction. For example, addMilliseconds(-3) gets the specific time minus 3 milliseconds from the current time. It can also be written in the form of a function, addMilliseconds(LVAR1).
9. Repeater functions
visibleItemCount: Count the number of visible items in the repeater.
ItemCount: Counts the total number of items in the repeater, note: if filtering is performed, the total number of items in the list is the number after filtering.
dataCount: Count the total number of data rows in the repeater.
pageCount: Count the total number of pages in the repeater.
pageIndex: Get the current page index of the repeater, that is, which page is currently in the repeater.
Item: The current row, usually followed by column name, such as item.xxx, is used to obtain the value of the column specified by the repeater. The general interaction is to set the text or image when repeater item is loaded, and it will also be used as a condition when editing rows and filtering.
TargetItem: target row, usually followed by column name, such as TargetItem .xxx, which is generally used in editing row interactions or conditions.
index: The repeater will be automatically numbered, in the order of 12345... Note: The number here is the number of lines displayed during the presentation, not the number of lines in the original repeater table. It will be automatically renumbered. In the following case, the first column is automatically numbered through item.index.
isFirst: Determine whether it is the first row in the repeater, if so, return true, otherwise return false. Often used for conditional judgments. Note: What it judges is whether the display content is the first row during the presentation, which is the same as the index, not the first row in the original repeater data table.
isLast: Determine whether it is the last row in the repeater, if so, return true, otherwise return false. Often used for conditional judgments. Note: What it judges is whether the displayed content is the last row during the presentation, which is the same as the index, not the last row in the original repeater data table.
isEven: Determines whether it is an even row in the repeater, if so, returns true, otherwise returns false. Often used for conditional judgments. Note: What he judges is whether the display content is an even-numbered row during the presentation, which is the same as the index, not the even-numbered row in the original repeater data table.
isOdd: Determine whether it is an odd-numbered row in the repeater, if so, return true, otherwise return false. Often used for conditional judgments. Note: What it judges is whether the displayed content is odd-numbered rows during the presentation, which is the same as index, not the odd-numbered rows in the original repeater data table.
isMarked: Determine whether it is a marked line in the repeater, if so, return true, otherwise return false.
isVisible : Determine if it is a visible row in the repeater, if so, return true, otherwise return false. No actual cases have been found so far. Because what you can see is the visible rows, all the results are true, and you can't click on it if you can't see it. can only be used as a condition.
10. Boolean functions
==: Equal function, which means equal in mathematics, generally used for conditional judgment or repeater filtering.
!=: Not equal to function, which means not equal in mathematics, generally used for conditional judgment or repeater filtering.
<: Less than function, which means less than mathematically, generally used for conditional judgment or repeater filtering.
<=: less than or equal function, which means less than or equal to mathematically, generally used for conditional judgment or repeater screening.
>: Greater than function, which means greater than mathematically, generally used for conditional judgment or repeater screening.
>=: Greater than or equal to a number, which means greater than or equal to in mathematics, generally used for conditional judgment or repeater screening.
&&: And function, generally used for conditional judgment or repeater filtering, meaning that two or more conditions are true at the same time.
||: Or function, generally used for conditional judgment or repeater filtering, meaning that only one of two or more conditions are me, the case is true.
The above is the introduction of all the functions in Axure. You can view the specific cases in the template. It is recommended that you can save it for quick query when you need it anytime.
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment