Callback Options

The Callbacks panel appear as shown:

Description of the illustration apex_callback_panel.png

The Callbacks panel comprises the following options:

Attribute	Description
Expand	To expand a selected vertex in the graph visualization, see Expand for more information.
FetchActions	To retrieve the graph actions from a data source, refer to fetchActions for more information.
Persist	To persist the graph actions to a data source, refer to persist for more information.
UpdateGraphdata	Callback to handle events when the graph data is updated.

Expand

You can expand a selected vertex in the graph and fetch the adjacent vertices using the Expand attribute in the Property Editor of the Page Designer.

Switch to the Processing tab on the left pane of the Page Designer and navigate to the After Submit node.
Right-click and select Create Process from the context menu.
Enter the process Name.
Specify Type as Execute Code.
Select the source Location as Local Database.

Select the source Language as PL/SQL and enter the following code in the PL/SQL input box.

DECLARE data clob;
id VARCHAR2(100) := apex_application.g_x01;
graph VARCHAR2(100) := "<graph-name>";
hops NUMBER := <hops>;
n NUMBER := hops - 1;
query VARCHAR2(1000) := 'SELECT e1 FROM MATCH ANY (x) ->{,' || n || '} (y) ON ' || graph || ', MATCH (y) -[e1]-> () ON ' || graph || ' WHERE id(x) = ''' || id || '''';
BEGIN
SELECT ORA_PGQL_TO_JSON(query) INTO data FROM sys.dual;
htp.p(data);
END;

In the preceding code:

<graph_name>: Name of the graph
<hops>: Number of hops to be expanded

Note that the process takes the vertex id to be expanded as input and returns the resulting output as JSON.

Select the execution Point as Ajax Callback.
Switch to the Rendering tab on the left pane of the Page Designer and select the graph visualization component.
Switch to the Attributes tab on the right pane and enter the following code in the Expand input box in the Callbacks panel.
```
const data = await apex.server.process('<process_name>', {
    x01: ids[0]
}, { dataType: 'text' });
try {
    return JSON.parse(data);
} catch (error) {
    return [];
}
```
In the preceding code, <process_name> refers to the name of process that was provided at step-3.
Click Save.
Run the application page and you can now click expand on a specific vertex in the graph as shown:

Description of the illustration apex_expand_vertex.png