Perspective PopUP Parameters

Hello,

I just created a view to be used as a popup in Perspective.
I can open the popup after a button in pressed, now I need to pass two parameters to the popup, so here is what I did on the button part:

Teh point is that I do not know how to retrieve those params in my popup.
I tried to add them as custom params at view or root level, but with no result, how can I get the parameters I passed in my popup?

Many thanks
Andrea

1 Like

Did you try adding your view params as view parameter?
Config

To clarify and expand on Chi’s answer, you want to make sure that you have both case-sensitive Result and Message as properties at View.params.

Some other notes from your screenshots:

  1. it looks like you might have a typo in your path to your Popup View -> “PopUs/DisplayPopUp”; that might be correct, but just thought I’d point it out.
  2. I noticed you had Script Actions surrounding your Popup Action. While you can queue multiple Actions for a single Event, there is no guarantee as to when the Actions will complete as they are run, so if you have any logic within the scripts which could affect your Popup, the data might not be in place when it is opened. You should consider moving your Script Actions and your Popup Action into one Script Action so that you can better control the flow.
1 Like

Waiting for a real answer/solution on this one

Posts #2 and #3 explain the solution.
Where are you stuck?

The button that prompts the popup does not pass the parameters to my popup even though I set it up with a path under my popup parameters- I am trying to parameterize my popup to follow the path that I pass to the button

You'd need to show us,

  1. How you pass the path to the button.
  2. How the button uses the path.
  3. How your Popup Action is configured.
  4. How the parameters are configured on your popup view.
  5. How the parameters are used in your popup view.

Otherwise we're all just guessing!

If you're posting screenshots of code then please post the formatted code as well to save us having to type it out. Please see Wiki - how to post code on this forum.

You should look at the Inductive University. This is a basic concept covered by the training content (although you should ignore anything to do with passing UDTType property types to Templates/Popups in Vision)

This is how I have it set up so far, very open to changing my thought process/logic behind how this is set up. My original post is Help With Paramaterization to Write to Tags but I have found that my issue is with passing the parameter from the Initial Button to the PopUp Window:

Image 1: Event Configuration for Initial Button (that brings up popup)

Image 2: Parameters for Initial Button (that brings up popup) (This is the parameter path that I want passed to my popup)

Image 3: Popup Window with respective parameters and path. This path I want passed in from my initial button

Image 4: How my Start Button is linked to the Popup parameter path. This works as intended, but it is not parameterized to the path from my Initial Button. Even if I change my Initial Button parameter, this seems to be hardcoded to the Popup Window parameter path

nminchin, I cannot find anything that follows the same process that I am following. I saw some for passing parameterized parameters to popups but it is not the same as what I am trying to accomplish

I would be adding a label bound to your {view.params.path} value to see what its value is, or in your button action add system.perspective.print(self.view.params.path) and it will show in the browser's console

My value is correct as I was able to verify in the console. My issue is that if I change which tank tag I link to my initial button, it does not pass to my popup window. My popup window remains that same tag displayed in Image 3. I'm not sure how to further parameterize it so it receives the path from the initial button. Otherwise, I will need to make a new object for various tanks. I am trying to make a template object where I can link my tag to the path in the initial button which will pass to the popup window.

I think at this stage we need a copy of the json of your components, or an export. Can you export the button and the popup?

Json for Initial Button:
-----------------------------

{
  "custom": {},
  "params": {
    "description": "Device Description",
    "name": "TK2106Recirc",
    "path": "[default]Recirc/TK2106Recirc"
  },
  "propConfig": {
    "params.description": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.name": {
      "binding": {
        "config": {
          "path": "view.params.path"
        },
        "transforms": [
          {
            "code": "\tplcTagAddress \u003d str(value)\n\tif \"/\" in plcTagAddress:\n\t\ttext \u003d plcTagAddress.split(\"/\")[-1]\n\t\ttext \u003d text.replace(\"_\", \"-\")\n\telse:\n\t\ttext \u003d \"Invalid tag path\"\n\treturn text",
            "type": "script"
          }
        ],
        "type": "property"
      },
      "paramDirection": "inout",
      "persistent": true
    },
    "params.path": {
      "paramDirection": "inout",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 23,
      "width": 56
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label_0"
        },
        "position": {
          "height": 23,
          "width": 56
        },
        "props": {
          "style": {
            "backgroundColor": "#C3C3C3",
            "borderStyle": "outset"
          },
          "text": "RECIRC",
          "textStyle": {
            "alignSelf": "center",
            "fontSize": 12,
            "fontWeight": "bold"
          }
        },
        "type": "ia.display.label"
      },
      {
        "events": {
          "dom": {
            "onMouseDown": {
              "config": {
                "draggable": true,
                "id": "{view.params.plcTagAddress}",
                "modal": false,
                "overlayDismiss": true,
                "position": {
                  "relativeLocation": "center"
                },
                "positionType": "relative",
                "resizable": true,
                "showCloseIcon": true,
                "type": "open",
                "viewParams": {
                  "description": "{view.params.description}",
                  "name": "{view.params.name}",
                  "path": "{view.params.path}"
                },
                "viewPath": "Templates/Device Pop-ups/Recirc",
                "viewportBound": false
              },
              "scope": "C",
              "type": "popup"
            }
          }
        },
        "meta": {
          "name": "Popup_PB"
        },
        "position": {
          "height": 20,
          "width": 54,
          "x": 2,
          "y": 2
        },
        "props": {
          "style": {
            "cursor": "pointer"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "custom": {
      "key": "value"
    },
    "meta": {
      "name": "root"
    },
    "position": {
      "x": 0,
      "y": 1
    },
    "props": {
      "style": {
        "overflow": "hidden"
      }
    },
    "type": "ia.container.coord"
  }
}

Json for Popup:
---------------------

{
  "custom": {},
  "params": {
    "description": "TK2106 Recirc",
    "name": "TK2106",
    "path": "[default]Recirc/TK2106Recirc"
  },
  "propConfig": {
    "params.description": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.faulted": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.name": {
      "paramDirection": "input"
    },
    "params.path": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.path.name": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.path.num": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.path.tag": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 253,
      "width": 308
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "breakpoints": [
                {
                  "colIndex": -1,
                  "name": "sm",
                  "order": 0,
                  "rowIndex": 0,
                  "span": 12
                },
                {
                  "colIndex": 0,
                  "name": "md",
                  "order": 1,
                  "rowIndex": 0,
                  "span": 12
                },
                {
                  "colIndex": 3,
                  "name": "lg",
                  "order": 1,
                  "rowIndex": 0,
                  "span": 1
                }
              ],
              "height": 36
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "expression": "{view.params.name}"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "style": {
                "backgroundColor": "#0c7bb3",
                "color": "#FFFFFF",
                "fontSize": 24,
                "fontWeight": "bolder",
                "textAlign": "center"
              }
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "breakpoints": [
                {
                  "colIndex": -1,
                  "name": "sm",
                  "order": 0,
                  "rowIndex": 1,
                  "span": 12
                },
                {
                  "colIndex": 7,
                  "name": "md",
                  "order": 4,
                  "rowIndex": 1,
                  "span": 12
                },
                {
                  "colIndex": 7,
                  "name": "lg",
                  "order": 4,
                  "rowIndex": 1,
                  "span": 1
                }
              ],
              "height": 60
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "expression": "{view.params.name} + \" Recirculation\""
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "style": {
                "classes": "XXX_Background/Primary/Grey",
                "color": "#FFFFFF",
                "fontSize": "12pt",
                "fontWeight": "bolder",
                "textAlign": "center"
              }
            },
            "type": "ia.display.label"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tsystem.tag.writeBlocking(self.view.params.path + \"/Startbutton\", 1)"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "Button"
            },
            "position": {
              "breakpoints": [
                {
                  "colIndex": 2,
                  "name": "sm",
                  "order": 0,
                  "rowIndex": 2,
                  "span": 8
                },
                {
                  "colIndex": 5,
                  "name": "md",
                  "order": 0,
                  "rowIndex": 3,
                  "span": 1
                },
                {
                  "colIndex": 5,
                  "name": "lg",
                  "order": 0,
                  "rowIndex": 3,
                  "span": 1
                }
              ],
              "height": 58
            },
            "propConfig": {
              "props.enabled": {
                "binding": {
                  "config": {
                    "fallbackDelay": 2.5,
                    "mode": "direct",
                    "tagPath": "[default]Recirc/TK2106Recirc/StartButtonAvailable"
                  },
                  "type": "tag"
                }
              },
              "props.style.backgroundColor": {
                "binding": {
                  "config": {
                    "expression": "if ({[default]Recirc/TK2106Recirc/Start},\u0027#00FF00\u0027, \"#CCCCCC\")"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "image": {
                "style": {
                  "borderStyle": "solid",
                  "color": "#000000"
                }
              },
              "style": {
                "borderColor": "#000000",
                "borderStyle": "solid",
                "borderWidth": 2
              },
              "text": "Start",
              "textStyle": {
                "color": "black"
              }
            },
            "type": "ia.input.button"
          },
          {
            "events": {
              "dom": {
                "onMouseDown": {
                  "config": {
                    "script": "\tsystem.tag.writeBlocking(self.view.params.path + \"/AbortButton\",1)"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "Button_0"
            },
            "position": {
              "breakpoints": [
                {
                  "colIndex": 2,
                  "name": "sm",
                  "order": 0,
                  "rowIndex": 3,
                  "span": 8
                },
                {
                  "colIndex": 5,
                  "name": "md",
                  "order": 0,
                  "rowIndex": 3,
                  "span": 1
                },
                {
                  "colIndex": 5,
                  "name": "lg",
                  "order": 0,
                  "rowIndex": 3,
                  "span": 1
                }
              ],
              "height": 58
            },
            "propConfig": {
              "props.enabled": {
                "binding": {
                  "config": {
                    "fallbackDelay": 2.5,
                    "mode": "direct",
                    "tagPath": "[default]Recirc/TK2106Recirc/AbortButtonAvailable"
                  },
                  "type": "tag"
                }
              },
              "props.style.backgroundColor": {
                "binding": {
                  "config": {
                    "expression": "if ({[default]Recirc/TK2106Recirc/Abort},\u0027#00FF00\u0027, \"#CCCCCC\")"
                  },
                  "type": "expr"
                }
              },
              "props.style.color": {
                "binding": {
                  "config": {
                    "expression": "if ({[default]Recirc/TK2106Recirc/Abort},\u0027#00FF00\u0027, \"#CCCCCC\")"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "style": {
                "borderColor": "#000000",
                "borderStyle": "solid",
                "borderWidth": 2
              },
              "text": "Stop",
              "textStyle": {
                "color": "black"
              }
            },
            "type": "ia.input.button"
          }
        ],
        "meta": {
          "contextMenu": {
            "style": {
              "overflow": "hidden"
            }
          },
          "name": "ColumnContainer",
          "tooltip": {
            "style": {
              "overflow": "hidden"
            }
          }
        },
        "position": {
          "basis": "316px"
        },
        "props": {
          "breakpoints": [
            {
              "minWidth": 0,
              "name": "sm"
            },
            {
              "minWidth": 423,
              "name": "md"
            },
            {
              "minWidth": 996,
              "name": "lg"
            }
          ],
          "style": {
            "backgroundColor": "#c5c5c5",
            "borderWidth": 4,
            "overflow": "hidden"
          }
        },
        "type": "ia.container.column"
      }
    ],
    "meta": {
      "contextMenu": {
        "style": {
          "overflow": "hidden"
        }
      },
      "name": "root"
    },
    "props": {
      "style": {
        "overflow": "visible"
      }
    },
    "type": "ia.container.flex"
  }
}

Test Popup Tag Write.zip (13.9 KB)

This works for me. I didn't really change anything (although there are a few issues I see with a few things e.g. the button doesn't resize properly and is using old raised-bevel styling, I wouldn't be using a column container for the popup, i'd just use a flex, there's no need for the name and path params on the button to be input/outputs, they should just be inputs, also you're fixed the binding to a specific tag for the button background colour in the popup as well as a lot of the other props too)

And this is my tag structure:

I probably also need a copy of the embedded view instance of your button to see how you're passing in the "path" param, and a screenshot of the structure of your tags within that tagpath

2 Likes