NSB App Studio - User contributions [en]

TypeName

2025-02-03T02:55:27Z

Seneca: /* Output */ Changes capitalization on return values; return values are in lowercase, not sentnece case

TypeName(''variable'')

== Description ==

TypeName returns a string specifying the type of a variable. The required parameter, ''variable'', is any variable.

'''Table 24: TypeName return values'''

{| class="wikitable"
|-
! Return value !! Description
|-
| boolean || Boolean value
|-
| currency || Currency value
|-
| date|| Date value
|-
| double || Double-precision floating-point value
|-
| integer|| Integer value
|-
| object|| Generic object
|-
| string|| String value
|-
| array|| Array
|}

== Example (Basic) ==

<pre>
Rem TypeName Example
'TypeName returns variable type as a string
Dim nInteger, nSingle
nInteger = CInt(44)
Print 44 & " is a/an " & TypeName(nInteger)
nSingle = CSng(99.44)
Print 99.44 & " is a/an " & TypeName(nSingle)
</pre>

== Output ==

<pre>
44 is a/an integer
99.44 is a/an double
</pre>

== Related Items ==

[[is (operator)|Is]], [[vartype|VarType]]

[[Category:Language Reference]]

[[Category:Variable Handling]]

[[Category:Variable Handling]]

[[Category:BASIC Functions]]

TypeName

2025-02-03T02:54:14Z

Seneca: Corrects capitalization on TypeName return values; values returned are in lowercase, not sentence case

TypeName(''variable'')

== Description ==

TypeName returns a string specifying the type of a variable. The required parameter, ''variable'', is any variable.

'''Table 24: TypeName return values'''

{| class="wikitable"
|-
! Return value !! Description
|-
| boolean || Boolean value
|-
| currency || Currency value
|-
| date|| Date value
|-
| double || Double-precision floating-point value
|-
| integer|| Integer value
|-
| object|| Generic object
|-
| string|| String value
|-
| array|| Array
|}

== Example (Basic) ==

<pre>
Rem TypeName Example
'TypeName returns variable type as a string
Dim nInteger, nSingle
nInteger = CInt(44)
Print 44 & " is a/an " & TypeName(nInteger)
nSingle = CSng(99.44)
Print 99.44 & " is a/an " & TypeName(nSingle)
</pre>

== Output ==

<pre>
44 is a/an Integer
99.44 is a/an Double
</pre>

== Related Items ==

[[is (operator)|Is]], [[vartype|VarType]]

[[Category:Language Reference]]

[[Category:Variable Handling]]

[[Category:Variable Handling]]

[[Category:BASIC Functions]]

Keyboard shortcuts

2024-03-16T02:43:50Z

Seneca: Added S for save

{| class="wikitable"
|+ AppStudio Keyboard Shortcuts
|-
! Action !! Shortcut
|-
| Deploy || F6
|-
| Refresh Deploy || F7
|-
| Start in Desktop Browser || F5
|-
| Nudge Left || Alt + Left
|-
| Nudge Right || Alt + Right
|-
| Nudge Up || Alt + Up
|-
| Nudge Down || Alt + Down
|-
| Undo || Ctrl + Z
|-
| Redo || Ctrl + Shift + Z
|-
| Cut || Ctrl + X
|-
| Copy || Ctrl + C
|-
| Paste || Ctrl + V
|-
| Select All || Ctrl + A
|-
| Find/Replace || Ctrl + F
|-
| Find Next || F3
|-
| New Project || Ctrl + N
|-
| Open Project || Ctrl + O
|-
| Open Older Project || Ctrl + P
|-
| Save Project || Ctrl + S
|}

Keyboard shortcuts

2024-03-16T02:37:08Z

Seneca: Adds list of current keyboard shortcuts

Button (Bootstrap)

2024-03-06T21:44:42Z

Seneca: Adding semantic headers; correcting format of code samples for adding icons to the right of button text

[[file:Bsbuttons.png]]

== Description ==

Buttons can be clicked on by users to initiate actions.

By setting the appearance, buttons can have different colors.

Buttons can be grouped into horizontal and vertical groups.

The color of a Bootstrap button is set by its appearance property. Possible values are
<pre>
default, primary, success, info, warning, danger and link
</pre>

To change a button from primary to danger, do this:
<pre>
$( "#Button6" ).removeClass( "btn-primary" );
$( "#Button6" ).addClass( "btn-danger" );
</pre>
The colors for each of each of the appearance settings is defined in the Bootstrap them you use. This provides your app with a consistant look and feel throughout.

To change the icon and text at runtime, do this:
<pre>
Button1.innerHTML = " Button"
Button1_icon.title = "New Title"
</pre>

[[Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and Tooltips]] are supported.

=== Add Icons to Right of Button Text ===

When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

==== Bootstrap 3 ====

Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.

<pre>
Button1.value = "Example Button Text"
</pre>

==== Bootstrap 4 and 5 ====

Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., m*-1, m*-2, m*-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

Add these classes to the button's class field:
<pre>
Button1.class = "d-flex flex-row-reverse justify-content-center"
</pre>

Add a span like the following to the button's value field. Note that mr-2 is the correct syntax for Bootstrap 4. If you are adding a Bootstrap 5 button, the class would be me-2:
<pre>
Button1.value = "Example Button Text"
</pre>

== Properties and Methods ==

Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| appearance || Appearance of the alert. For example: success, info, warning, danger.
|-
| badge || Adds a Badge to the alert.
|-
| blocklevel || Make the button full width of parent?
|-
| ChangeForm || id of the form to change to if clicked. Optional.
|-
| grouping || Is this button part of a group? Choices are No, Start Horizontal, Start Vertical, Middle and End.
|-
| groupStyle || The styling to apply to the entire group.
|-
| icon || Optional. Icon to put at right of control. Bootstrap 3 uses the [http://fontawesome.io/icons/ Font Awesome] set. Examples: trash, check. Bootstrap 4 uses [https://www.nsbasic.com/app/OpenIconic.html Open Iconic]. Examples trash, check, circle-check.
|-
| iconTitle || Optional. Text to display when hovering cursor over icon. Bootstrap 4.
|-
| Outline || Display button with an outline, instead of solid color. Bootstrap 4.
|-
| toggleControl || Supply the name of another control here, like a [[Card_(Bootstrap)|Card]] or [[Image (Bootstrap)|Image]]. Clicking the button will show or hide the other control.
|-
| size || The size of the button. Can be large, medium, small or extra small (Bootstrap 3 only).
|-
| value || The title of the button. Design time or runtime.
|-
| hide() || Hide the button. Runtime.
|-
| show() || Show the button. Runtime.
|}

== Events ==

Standard [[events|events]] are supported. For this control, the onclick event will be most useful.

== Example ==

<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Button1.onclick = function() {
NSB.MsgBox("You can display a message or take other action when clicked");
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Button1_onclick()
MsgBox "You can display a message or take other action when clicked"
End Function
</syntaxhighlight>
</tabber>

== Output ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:Bootstrap]]

Button (Bootstrap)

2024-03-05T07:41:16Z

Seneca: Added correct spacing class syntax for Bootstrap 4 and 5

[[file:Bsbuttons.png]]

== Description ==

Buttons can be clicked on by users to initiate actions.

By setting the appearance, buttons can have different colors.

Buttons can be grouped into horizontal and vertical groups.

The color of a Bootstrap button is set by its appearance property. Possible values are
<pre>
default, primary, success, info, warning, danger and link
</pre>

To change a button from primary to danger, do this:
<pre>
$( "#Button6" ).removeClass( "btn-primary" );
$( "#Button6" ).addClass( "btn-danger" );
</pre>
The colors for each of each of the appearance settings is defined in the Bootstrap them you use. This provides your app with a consistant look and feel throughout.

To change the icon and text at runtime, do this:
<pre>
Button1.innerHTML = " Button"
Button1_icon.title = "New Title"
</pre>

[[Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and Tooltips]] are supported.

When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.
<pre>
"Example Button Text
</pre>

'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., m*-1, m*-2, m*-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

Add these classes to the button's class field:
<pre>
d-flex flex-row-reverse justify-content-center
</pre>

Add a span like the following to the button's value field. Note that mr-2 is the correct syntax for Bootstrap 4. If you are adding a Bootstrap 5 button, the class would be me-2:
<pre>
Example Button Text
</pre>

== Properties and Methods ==

Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| appearance || Appearance of the alert. For example: success, info, warning, danger.
|-
| badge || Adds a Badge to the alert.
|-
| blocklevel || Make the button full width of parent?
|-
| ChangeForm || id of the form to change to if clicked. Optional.
|-
| grouping || Is this button part of a group? Choices are No, Start Horizontal, Start Vertical, Middle and End.
|-
| groupStyle || The styling to apply to the entire group.
|-
| icon || Optional. Icon to put at right of control. Bootstrap 3 uses the [http://fontawesome.io/icons/ Font Awesome] set. Examples: trash, check. Bootstrap 4 uses [https://www.nsbasic.com/app/OpenIconic.html Open Iconic]. Examples trash, check, circle-check.
|-
| iconTitle || Optional. Text to display when hovering cursor over icon. Bootstrap 4.
|-
| Outline || Display button with an outline, instead of solid color. Bootstrap 4.
|-
| toggleControl || Supply the name of another control here, like a [[Card_(Bootstrap)|Card]] or [[Image (Bootstrap)|Image]]. Clicking the button will show or hide the other control.
|-
| size || The size of the button. Can be large, medium, small or extra small (Bootstrap 3 only).
|-
| value || The title of the button. Design time or runtime.
|-
| hide() || Hide the button. Runtime.
|-
| show() || Show the button. Runtime.
|}

== Events ==

Standard [[events|events]] are supported. For this control, the onclick event will be most useful.

== Example ==

<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Button1.onclick = function() {
NSB.MsgBox("You can display a message or take other action when clicked");
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Button1_onclick()
MsgBox "You can display a message or take other action when clicked"
End Function
</syntaxhighlight>
</tabber>

== Output ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:Bootstrap]]

Button (Bootstrap)

2024-03-05T07:31:33Z

Seneca: Updated instructions for adding icon to the right to be more clear.

[[file:Bsbuttons.png]]

== Description ==

Buttons can be clicked on by users to initiate actions.

By setting the appearance, buttons can have different colors.

Buttons can be grouped into horizontal and vertical groups.

The color of a Bootstrap button is set by its appearance property. Possible values are
<pre>
default, primary, success, info, warning, danger and link
</pre>

To change a button from primary to danger, do this:
<pre>
$( "#Button6" ).removeClass( "btn-primary" );
$( "#Button6" ).addClass( "btn-danger" );
</pre>
The colors for each of each of the appearance settings is defined in the Bootstrap them you use. This provides your app with a consistant look and feel throughout.

To change the icon and text at runtime, do this:
<pre>
Button1.innerHTML = " Button"
Button1_icon.title = "New Title"
</pre>

[[Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and Tooltips]] are supported.

When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.
<pre>
"Example Button Text
</pre>

'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

Add these classes to the button's class field:
<pre>
d-flex flex-row-reverse justify-content-center
</pre>

Add a span like this to the button's value field:
<pre>
Example Button Text
</pre>

== Properties and Methods ==

Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| appearance || Appearance of the alert. For example: success, info, warning, danger.
|-
| badge || Adds a Badge to the alert.
|-
| blocklevel || Make the button full width of parent?
|-
| ChangeForm || id of the form to change to if clicked. Optional.
|-
| grouping || Is this button part of a group? Choices are No, Start Horizontal, Start Vertical, Middle and End.
|-
| groupStyle || The styling to apply to the entire group.
|-
| icon || Optional. Icon to put at right of control. Bootstrap 3 uses the [http://fontawesome.io/icons/ Font Awesome] set. Examples: trash, check. Bootstrap 4 uses [https://www.nsbasic.com/app/OpenIconic.html Open Iconic]. Examples trash, check, circle-check.
|-
| iconTitle || Optional. Text to display when hovering cursor over icon. Bootstrap 4.
|-
| Outline || Display button with an outline, instead of solid color. Bootstrap 4.
|-
| toggleControl || Supply the name of another control here, like a [[Card_(Bootstrap)|Card]] or [[Image (Bootstrap)|Image]]. Clicking the button will show or hide the other control.
|-
| size || The size of the button. Can be large, medium, small or extra small (Bootstrap 3 only).
|-
| value || The title of the button. Design time or runtime.
|-
| hide() || Hide the button. Runtime.
|-
| show() || Show the button. Runtime.
|}

== Events ==

Standard [[events|events]] are supported. For this control, the onclick event will be most useful.

== Example ==

<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Button1.onclick = function() {
NSB.MsgBox("You can display a message or take other action when clicked");
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Button1_onclick()
MsgBox "You can display a message or take other action when clicked"
End Function
</syntaxhighlight>
</tabber>

== Output ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:Bootstrap]]

Button (Bootstrap)

2024-03-05T03:56:45Z

Seneca: Added information about positioning icons in bootstrap buttons

[[file:Bsbuttons.png]]

== Description ==

Buttons can be clicked on by users to initiate actions.

By setting the appearance, buttons can have different colors.

Buttons can be grouped into horizontal and vertical groups.

The color of a Bootstrap button is set by its appearance property. Possible values are
<pre>
default, primary, success, info, warning, danger and link
</pre>

To change a button from primary to danger, do this:
<pre>
$( "#Button6" ).removeClass( "btn-primary" );
$( "#Button6" ).addClass( "btn-danger" );
</pre>
The colors for each of each of the appearance settings is defined in the Bootstrap them you use. This provides your app with a consistant look and feel throughout.

To change the icon and text at runtime, do this:
<pre>
Button1.innerHTML = " Button"
Button1_icon.title = "New Title"
</pre>

[[Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and Tooltips]] are supported.

When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value property. You can add a non-breaking space to add room between the icon and the button text.
<pre>
Button1.value = " Example Button Text</pre>

'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex and .flex-row-reverse to the buttons class property. Use Bootstrap's justify and align classes to modify the placement of the button text and icon within the button (e.g., use justify-content-center to center the text and icon). Add space between the button text and icon by adding a span around the text in the button's value property and using Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text.
<pre>
Button1.class = "d.flex flex-row-reverse justify-content-center"
Button1.value = "Example Button Text"
</pre>

== Properties and Methods ==

Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| appearance || Appearance of the alert. For example: success, info, warning, danger.
|-
| badge || Adds a Badge to the alert.
|-
| blocklevel || Make the button full width of parent?
|-
| ChangeForm || id of the form to change to if clicked. Optional.
|-
| grouping || Is this button part of a group? Choices are No, Start Horizontal, Start Vertical, Middle and End.
|-
| groupStyle || The styling to apply to the entire group.
|-
| icon || Optional. Icon to put at right of control. Bootstrap 3 uses the [http://fontawesome.io/icons/ Font Awesome] set. Examples: trash, check. Bootstrap 4 uses [https://www.nsbasic.com/app/OpenIconic.html Open Iconic]. Examples trash, check, circle-check.
|-
| iconTitle || Optional. Text to display when hovering cursor over icon. Bootstrap 4.
|-
| Outline || Display button with an outline, instead of solid color. Bootstrap 4.
|-
| toggleControl || Supply the name of another control here, like a [[Card_(Bootstrap)|Card]] or [[Image (Bootstrap)|Image]]. Clicking the button will show or hide the other control.
|-
| size || The size of the button. Can be large, medium, small or extra small (Bootstrap 3 only).
|-
| value || The title of the button. Design time or runtime.
|-
| hide() || Hide the button. Runtime.
|-
| show() || Show the button. Runtime.
|}

== Events ==

Standard [[events|events]] are supported. For this control, the onclick event will be most useful.

== Example ==

<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Button1.onclick = function() {
NSB.MsgBox("You can display a message or take other action when clicked");
};
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Button1_onclick()
MsgBox "You can display a message or take other action when clicked"
End Function
</syntaxhighlight>
</tabber>

== Output ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:Bootstrap]]