Memri / Tools / CVU Language Guide_old

CVU Language Guide_old

UNDER CONSTRUCTION..

Here goes an introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Expression Language


Arithmetic Operators

(5 + 10 * 4 - 3 / 10) / 10 # result: 4.470000000000001

And and Or conditional statements

true and false # result: false
true or false # result: true

And and Or to select values

.age > 18 and "Ask an adult question?" # result: only when the age is over 18 the text is displayed
.title or "Untitled Note" # result: a string with the title or "Untitled Note" when title is not set

Conditions

true ? 'yes' : 'no' # result: 'yes
true ? false and true ? -1 : false or true ? 'yes' : 'no' : -1 # result: 'yes

Comparison

true = false # result: false
true != false # result: true
5 > 10 # result: false
10 >= 5 # result: true
5 < 10 # result: true
10 <= 5 # result: false

Variable Lookup and function execution

.bar and bar.foo(10) and bar[foo = 10] or shouldNeverGetHere"

Plus and minus variable modifier

-5 + -(5+10) - +'5' # result: -25

Negation

!true # result: false

Strings

'asdadsasd\\'asdasd' # result: "asdadsasd'asdasd"

Type conversion

5 + '10.34' + true # result: 16.34
0 ? -1 : 1 ? '' ? -1 : 'yes' : -1 # result: -1

String mode

"Hello {fetchName()}!"
"Hello {.firstName} {.lastName}"
"{fetchName()} Hello"

Edge traversal

.label[] # Returns a list of items that are connect with edge type label
._label[] # Returns a list of edges with edge type label
.label # Returns the first item with edge type label
.label[.firstName = "James"] # Returns a list of item for which firstName is "James"
._label[.sequence > 3] # Returns a list of edges for which sequence is larger than 3
._~label # Returns the first reverse edge for which edge type is label
._~label[] # Returns a list of reverse edges for which edge type is label
.~label # Returns an item connected via a reverse edges for which edge type is label
.~label[] # Returns a list of items connected via a reverse edges for which edge type is label

Variables and Properties

The available variables change based on the context. For instance certain renderers make additional variables available. The following variables are always available.

me # A reference to the Person item that represents the user
context # A reference to the context instance
context.showSessionSwitcher # A boolean to toggle the session switcher
context.showNavigation # A boolean to toggle the navigation

sessions # A reference to all the sessions
sessions[i:Number] # a reference to a session in the list of all sessions

currentSession # A reference to the current session
session # A reference to the current session
session.name # The name of the session
session.editMode # Whether the session is in edit mode
session.showContextPane
session.showFilterPanel
session.screenshot

currentView # A reference to the current view
view # A reference to the current view
view.name
view.datasource
view.datasource.query
view.datasource.sortProperty
view.datasource.sortAscending
view.contextPane
view.userState
view.userState.<key>
view.viewArguments
view.viewArguments.<key>
view.resultSet
view.activeRenderer
view.backTitle
view.searchHint
view.actionButton
view.titleActionButton
view.editActionButton
view.sortFields
view.filterButtons
view.contextButtons
view.renderConfig
view.emptyResultText
view.title
view.subtitle
view.filterText
view.searchMatchText

singletonItem # A reference to the current single item, when in a single item view
singletonItem.<field> 

Functions

setting(path:String) # Returns the value of a setting. e.g. setting('device/upload/cellular')
item() # Returns the context item i.e. synonymous with {{.}}
item(typeName:String, uid:Number) # Returns a specific item of a type with uid. e.g. item(Person, 10920823990)
debug(message1:Any[, message2:Any[, ...]]) # Prints one or more variables in the debug console e.g. debug(item())
min(value1:Number, value2:Number) # Returns the lowest value. e.g. min(5, 0) -> 0
max(value1:Number, value2:Number) # Returns the largest value. e.g. max(5, 0) -> 5
floor(value:Number) # Returns the closes smaller integer. e.g. floor(5.3) -> 5
ceil(value:Number) # Returns the closes larger integer. e.g. floor(5.3) -> 6

Methods for types

item.describeChangelog() # Short description of how this item was changed since it was created
item.computedTitle() # A title for this item
item.edge(edgeType:String) # An alternative way to get an edge, via a string
item.edges(edgeType:String) # An alternative way to get a list of edges, via a string

string.uppercased # turn the string to all caps
string.lowercased # turn the string to all lower case
string.camelCaseToWords # change a camel cased string to words. e.g. helloBeautifulWorld -> Hello Beautiful World
string.plural # not implemented (currently only adds an s to the end)
string.firstUppercased # first letter is upper cased
string.plainString # strip all HTML
string.count # the number of characters in the string

date.format() # format the date based on the user defined setting for a long date format
date.format("time") # format the date based on the user defined setting for time
date.format(format:String) # format the date based on a formatting string. e.g. date.format("YYYY HH:mm")
date.timeSince1970 # retrieve the number of milliseconds of the date since 1/1/1970
date.timeSinceNow # retrieve the number of milliseconds of the date from now

edge.source # fetch the source item of the edge
edge.target # fetch the target item of the edge
edge.item # fetch the target item of the edge
edge.label # the label of the edge
edge.type # the type of the edge (e.g. "brother")
edge.sequence # the sequence number of an edge that is in an ordered list of edges

edges.count # the number of edges in the list
edges.first # the first edge in the list
edges.last # the last edge in the list
edges.items # a list of items that the list of edges point to

Supported Definitions


Sessions

[sessions = "name"] {
    [session] {
    }
}

Session

[session = "name"] {
    [view] {
    }
}

View

selector based on a list of the same types

Person[] {
    title: "{firstName} {lastName}"
}

Use *[] to apply to a list of any datatypes Use mixed[] to apply to a list of mixed datatypes

selector based on the data item type and its properties

Person {
    title: "{firstName} {lastName}"
}

Use * to apply to any data item

Renderer

[renderer = list] {
    press: openView
}

Datasource

Selects where data is loaded from, to display in this view.

[datasource = pod] {
    query: "Person"
}

Color

The CVU language has built-in support for named colors that support dark and light mode. These colors can be defined using a color selector and can then be used in place of #333 style literal colors. In fact literal colors in views are highly discouraged. Users of views can override named colors in their settings, which they cannot do for literal colors.

[color = "background"] {
    light: #330000
    dark: #ff0000
}

[color = "highlight"] {
    light: #000
    dark: #fff
}

Style

Similarly styles can be combined into named sets that can then be applied to UI elements.

[style = "my-label-text"] {
    border: background 1
    color: highlight
}

/* Example usage */
Text {
    style: my-label-text
}

Language

Language selectors are used to specify text used in views in various natural languages, by replacing the text with variables. Here’s an example:

[language = "English"] {
    sharewith: "Share with..."
    addtolist: "Add to list..."
    duplicate: "Duplicate"
    showtimeline: "Show Timeline"
    timelineof: "Timeline of this"
    starred: "Starred"
    all: "All"
}
[language = "Dutch"] {
    sharewith: "Deel met..."
    addtolist: "Voeg toe aan lijst..."
    duplicate: "Dupliceer"
    showtimeline: "Toon Tijdslijn"
    timelineof: "Tijdslijn van deze"
    starred: "Favoriete"
    all: "Alle"
}

/* Example usage */
Text {
    text: "$sharewith"
}

UI elements


Element Name Description
VStack Element that stacks its children vertically
HStack Element that stacks its children horizontally
ZStack Element that stacks its children on top of eachother
EditorSection Element that renders as a section in the general editor
EditorRow Element that renders as a row in a section in the general editor
EditorLabel Element that renders a label in a row in the general editor
Button Element that renders a button in the user interface. Buttons connect to
FlowStack Element that horizontally stacks its children and wraps to the next line at the end of the container.
Text Element that renders text on the screen
Textfield Element allows a user to change text
ItemCell Element that renders a data item as if it was displayed in a specific renderer
SubView Element that renders a view inside another view
Map Element that displays content on a map
Picker Element that allows a user to choose from a list of options
SecureField Element that allows a user to change text while keeping the entry private
ActionButton Element that
MemriButton Element that displays a cononical representation of a data item
Image Element that displays an image
Circle Element that renders a circle
HorizontalLine Element that renders a horizontal line
Rectangle Element that renders a rectangle
RoundedRectangle Element that renders a rounded rectangle
Spacer Element that maximizes the space between elements in a stack
Divider Element that renders a divider line
Empty Element that does not render anything

See this link for usage (better docs are coming)

Property Possible values Description
resizable String set do “stretch”, “fit”, “fill” to determine how the element is resized (esp. Image)
show Boolean whether to show the element or not. Use an expression to toggle visibility (e.g. {{labels.count}}).
alignment String set to “center”, “top”, “left”, “bottom”, “right” to set the alignment of children of the stack element.
align String set to “center”, “top”, “left”, “bottom”, “right” to set the alignment of the element relative to their siblings in a stack.
textalign String set to “left”, “center”, “right” to determine how text is aligned.
spacing Number sets the space between elements in a stack.
title String sets the title of an element.
text String set the text of a Text element
image String, File, URL(not supported yet) sets the image location of an Image element
nopadding Boolean sets whether to display padding in a section in the general editor
press Action sets the action to be executed when the user presses the button
bold Boolean sets whether the text is rendered bold
italic Boolean sets whether the text is rendered italic
underline Boolean sets whether the text is rendered underline
strikethrough Boolean sets whether the text is rendered strikethrough
list Array sets a list to iterate over (used by FlowStack, ForEach (not supported yet))
viewName String sets the name of the view to display in the SubView
view View sets a literal definition of a view to load in the SubView
viewArguments Dict sets a dict of named arguments to pass to an ItemCell or SubView
location, Location sets a location to render on the Map element
address Address sets an address to render on the Map element
systemname String sets the system name of the image to display in the Image element
cornerradius Number sets the rounding of the corners of the element
hint String sets the hint to display in a TextField to inform a user what to type
value String sets the value of a form element
datasource String sets the datasource of a view
defaultValue String sets the default value of a form element
empty String sets the empty message displayed in a text element
style Array, String sets the style classes to apply to the element
color Color sets the text color of an element
font Number String sets the size of the font and the boldness: “thin”, “ultrathin”, “regular”, “semibold”, “medium”, “bold”
padding Array, Number Set the distance between the content of the element and its edge. Either one number for all edges, or one for each.
background Color sets the color of the background of the element
rowbackground color sets the color of the background of the row in the list renderer
border Color Number sets the color of the border and its size
margin Array, Number Set the distance between the edge of the element and its neighbors and parent. Either one number for all edges, or one for each.
shadow Array
offset Number Number Sets the x and y offset
blur Number Sets the level of blur between 0 and 1
opacity Number Sets the opacity of the element between 0 and 1
zindex Number Sets the zindex controling which element is rendered on top of the other
minWidth Number Sets the minimal width of the element
maxWidth Number Sets the maximal width of the element
minHeight Number Sets the minimal height of the element
maxHeight Number Sets the maximal height of the element

N.B. Each of these properties can be calculated using the CVU expression language.


Actions

Action Arguments names and types Description
back loads the previous view in the current session
addDataItem template:DataItem add an item based on a template
openView view:View arguments:ViewArguments opens a new view based on a literal view definition
openViewByName name:String viewArguments:ViewArguments opens a view by name
toggleEditMode toggles edit mode in the renderer/editor in the current view
toggleFilterPanel shows and hides the filter panel
star toggles the starred property on the current or a selection of data items
showStarred filters the current view to show only the elements that are starred
showContextPane show the context pane
showNavigation show the main navigation
share (not implemented yet)
duplicate duplicate the current data item
schedule (not implemented yet)
addToList name:String (not implemented yet)
delete delete the current or selection of data items
setRenderer name:Renderer change the renderer that is displaying the content
select select one or more data items (not implemented)
selectAll select all data items (not implemented)
unselectAll unselect all data items (not implemented)
openLabelView, (not implemented)
showSessionSwitcher show the session switcher
forward load the next view in the current session
forwardToFront load the topmost view in the current session
backAsSession load the previous view in a new session (copies the history)
openSession session:Session loads a new session based on a literal session definition
openSessionByName name:String loads a new session by name
addSelectionToList (not implemented)
closePopup closes a subview that is opened in a popup
noop does not execute an action (can be used as a placeholder while working on a view)

See [https://gitlab.memri.io/memri/ios-application/blob/refactor/memri/view/views/Action.swift](this link) for usage (better docs are coming)