JavaScript: stumped by incomplete tutorial on Block <-> UI communication

JavaScript: stumped by incomplete tutorial on Block <-> UI communication

  

Hello

I've tired to implement what is explained in :

https://success.outsystems.com/Documentation/Development_FAQs/How_to_Call_a_Block_Action_in_a_Mobile_Screen

...however, the very last instruction claims to be a reference a Block's ID, but does not explain exactly the steps to allow the object reference to be visible within the scope of the actions owned by the Screen which contains the Block.

The tutorial web page just shows 'PhoneNumberBlock.id' surrounded by a purple rectangle, but no clue as to how to select the property. Also, all the visible screenshots show a Block named 'PhoneNumber', not 'PhoneNumberBlock'. 

When I try it in a live environment, I get an error 'Uknown object '####' in expression. (see image)

Both my Screen and the Block are public and they are under the same UI Flow (like the tutorial shows).

Can any one please fill in the missing details to the tutorial or point me to a fully tested and documented tutorial on making Screen Client actions be able to converse with the inner mechanisms of a Block?

Thanks


HI Mark,


Can you show a screenshot of the block being used in the screen?

To have it available in the expression editor just requires you to give it a name. The "PhoneNumber" is the name of the block and "PhoneNumberBlock" is the name that you give to it after dragging to the screen.


Regards,
João Rosado

Hello, João.

Attached is the screenshot showing the actual Block I'm using (not 'PhoneNumber', but one I created for my app).

As per the tutorial, I made a top-most Container in the Block so that it can be used to reference its parent Block object (see image attached).

The top-most container has no Attributes (the tutorial does not seem to require them) or Classes.

Note: The app is in 'ready to publish' state because I backed out all the JavaScript since my first post.

Intention:
My intention with this approach is to have a Block component whose job is to scan and temporarily store a data in form of QRcode with some appended text (as a structure(?)). The Binary data of the image, as well as the text, need to be transferred up to the parent screen so the screen can show the text in the form. If the Save button is clicked, Form contents (linked to an Entity) get saved along with the image. 

Thanks for looking into this.

Regards
Marc

Solution

Hi Mark,


Your screenshot confirms what I tried to explain. For the Id to be available in the expression editor you need to give it a name:

If you call that something like "PayeeIdentifierToolboxBoxBlock", then you will be able to write in the expression the "PayeeIdentifierToolboxBoxBlock.Id".


Edit: a documentation link about that.


Regards,
João Rosado

Solution

Hi, João

This was very helpful, thanks

I had not realized that the Block has to be renamed when it is 'lodged' into a screen. I had assumed it its original name should be accessible/visible.

I've now named it 'ScreenPayeeWidgetPayeeIdentifierToolBox'

Thanks
Regards
Marc