Calling API in Edge and Dispalying result in UI

Hello Everyone I am new to this OpenEMS structure and I am trying to figure out something. I have a function in the OpenEMS Edge that calls an API, fetches a result, and sends it to OpenEMS UI below is the code for Edge and UI both. what I am trying to figure out is how UI is contacting the Edge and if I need to set up another API response to display in UI what should I do ?

EDGE CODE

public class ExecuteTradeGroupResponse extends JsonrpcResponseSuccess {

	private static final String API_URL = "http://localhost:7005/api/community/community2gui/pools";

	public ExecuteTradeGroupResponse(UUID id) {
		super(id);
	}

	public ExecuteTradeGroupResponse(UUID id, JsonElement params) {
		super(id);
		String tradeGroups = params.toString();
		BufferedWriter bw = null;

		System.err.println(" Called ExecuteTradeGroupRequest: " + tradeGroups);

		if (tradeGroups.toLowerCase().contains("groups")) {

			String jsonFilename = ControllerBestTradeGroups.cacheJSON;
			// System.out.println("STORING to "+jsonFilename);
			File file = new File(jsonFilename);
			try {
				if (!file.exists())
					file.createNewFile();

				FileWriter fw = new FileWriter(jsonFilename);
				bw = new BufferedWriter(fw);
				bw.write(tradeGroups);
				bw.close();
			} catch (Exception e) {
				e.printStackTrace();
				System.err.println("File not written Successfully");
			}
		}
	}

	@Override
	public JsonObject getResult() {
		
		final OkHttpClient client = new OkHttpClient();

		Request request = new Request.Builder().url(API_URL).build();

		try (Response response = client.newCall(request).execute()) {

			if (!response.isSuccessful()) {
				throw new IOException("Unexpected code " + response);
			}
		     String responseBodyString = response.body().string();
			 
		     Gson gson = new GsonBuilder().setPrettyPrinting().create();
		     List<Object> responseList = gson.fromJson(responseBodyString, ArrayList.class);

		     JsonObject tradeGroupsWrapper = new JsonObject();
		     tradeGroupsWrapper.add("tradeGroups", gson.toJsonTree(responseList));
		     tradeGroupsWrapper.addProperty("InviteCode","test");
		     return tradeGroupsWrapper;
		
		} catch (IOException e) {
			System.err.println("[ERROR] " + e.getMessage());
			System.out.print("No Response");
			System.err.println("[ERROR] No Response");
			return null;
		}	
	}
}

UI CODE

 this.service.getCurrentEdge().then((edge) => {
      let request = new ComponentJsonApiRequest({
        componentId: "tradegroups0",
        payload: new GetTradeGroupsRequest({
          action: "read",
          properties: "{}",
          param: "test",
        }),
      });
      edge
        .sendRequest(this.service.websocket, request)
        .then((response) => {
          console.log(
            "Trade Groups Data Response Is " + JSON.stringify(response.result)
          );
          this.tradeGroupsObject = JSON.parse(
            JSON.stringify(response.result)
          ).tradeGroups;

          this.ngOnInitPart2();
        })
        .catch((reason) => {
          console.warn(reason);
        });
    });

Hi @5HATIM5,

what you are trying to do does look quite ok. What exactly are you struggling with?

To better understand how the communication between UI and Edge (optionally via Backend) works, you can follow the example of “GetModbusProtocolExportXlsxRequest”. This is a feature that allows downloading the specific Modbus protocol of Modbus-API-Controller via OpenEMS UI:

For direct connection between OpenEMS UI and OpenEMS Edge via Controller Api Websocket:

Hope that clarifies some doubts and serves as a documentation for future readers.

Regards,
Stefan