Sure:
Use Case 1, Component Modification
- Adding extra buttons to the bottom of a tag browse tree.
- Adding extra buttons to the header of an alarm table.
- Assigning a
patternto an input text field (this example assigns a pattern that requires a PIN of exactly 4 numbers.
View JSON
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"domId": "alarms",
"name": "AlarmStatusTable"
},
"position": {
"height": 280,
"width": 613,
"x": 5,
"y": 422
},
"type": "ia.display.alarmstatustable"
},
{
"children": [
{
"children": [
{
"meta": {
"name": "Button"
},
"position": {
"shrink": 0
},
"props": {
"text": "Extra Action"
},
"type": "ia.input.button"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "auto",
"grow": 0,
"shrink": 0
},
"props": {
"style": {
"margin": "0.5rem",
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "AlarmStatusTableExtras"
},
"position": {
"height": 300,
"width": 300,
"x": 372,
"y": 546
},
"props": {
"element": "() \u003d\u003e document.getElementById(\u0027alarms\u0027).getElementsByClassName(\u0027toolbarTabContainer\u0027)[0]"
},
"type": "embr.periscope.embedding.portal"
},
{
"meta": {
"domId": "tagTree",
"name": "TagBrowseTree"
},
"position": {
"height": 387,
"width": 257,
"x": 16,
"y": 21
},
"type": "ia.display.tag-browse-tree"
},
{
"children": [
{
"children": [
{
"meta": {
"name": "Button"
},
"position": {
"grow": 1,
"shrink": 0
},
"props": {
"text": "Extra Action"
},
"type": "ia.input.button"
},
{
"meta": {
"name": "Button_0"
},
"position": {
"grow": 1,
"shrink": 0
},
"props": {
"text": "Extra Action 2"
},
"type": "ia.input.button"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "auto",
"grow": 0,
"shrink": 0
},
"props": {
"alignContent": "center",
"direction": "column",
"style": {
"gap": "0.5rem",
"margin": "0.5rem",
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "TagBrowseTreeExtras"
},
"position": {
"height": 300,
"width": 300,
"x": 372,
"y": 546
},
"props": {
"element": "() \u003d\u003e document.getElementById(\u0027tagTree\u0027)"
},
"type": "embr.periscope.embedding.portal"
},
{
"meta": {
"domId": "textField",
"name": "TextField"
},
"position": {
"height": 32,
"width": 150,
"x": 325,
"y": 91
},
"props": {
"text": "123"
},
"type": "ia.input.text-field"
},
{
"meta": {
"name": "TextFieldExtras"
},
"position": {
"height": 300,
"width": 300,
"x": 372,
"y": 546
},
"props": {
"element": "() \u003d\u003e document.getElementById(\u0027textField\u0027)",
"events": {
"target": {
"lifecycle": {
"onMount": "(target) \u003d\u003e {\ntarget.pattern \u003d \u0027\\\\d{4,4}\u0027\n}"
}
}
}
},
"type": "embr.periscope.embedding.portal"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}
Use Case 2, Inverted Rendering
This example uses a Portal to break out of the normal rendering structure in order to simplify view development. Here's the problem statement:
- There is a main view, consisting of a header and a child view.
- There are several different child views available for selection.
- Depending on which child view is shown, different options need to be shown in the header.
In order to accomplish this without Portals, it is the responsibility of the main view to hide/show the different options (probably using some embedded views). 100% possible but kind of annoying to manage.
With Portals, each child view can directly add its options to the header. No conditional logic is needed on the main view, and no extra embedded views are needed for the option buttons. All of the configuration for the child view is contained inside the child view.
periscope_portal_header_example.zip (15.7 KB)