Novu•2y ago

layoutIdentifier override not working

Hi, I am overriding the layoutIdentifier when triggering a workflow. When I get the email the desired layout is not applied.
This only happens for the code first workflows I have defined. For the ones created from the dashboard the layout is correctly applied when I use the layoutIdentifier override.
Here is the trigger information:
curl -X POST 'https://api.novu.co/v1/events/trigger' \
-H 'Authorization: ApiKey NOVU_SECRET_KEY' \
-H 'Content-Type: application/json' \
-d '{
"name": "some-workflow",
"to": {
"subscriberId": "2"
},
"payload": {
"name": "Name 2",
"updatedBy": "Dragan"
},
"overrides": {
"layoutIdentifier": "test-layout"
}
}'

Ask Inkeep•7/15/24, 6:36 AM

Hi @Dragan, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

Ask Inkeep•7/15/24, 6:36 AM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

Layouts
Mailersend
Pushpad
SendGrid
-----------------------------

Ask Inkeep•7/15/24, 6:37 AM

Answer

To override the layout during a trigger event, you can use the layoutIdentifierlayoutIdentifier property in the

overrides

overrides

object. (1)

Here's an example of how to use the layoutIdentifierlayoutIdentifier override:

import { Novu } from "@novu/node";
const novu = new Novu("<NOVU_API_KEY>");
novu.trigger("workflow-identifier", {
  to: {
    subscriberId: "<SUBSCRIBER_ID>",
  },
  payload: {
    attachments: [
      {
        file: fs.readFileSync(__dirname + "/data/test.jpeg"),
        name: "test.jpeg",
        mime: "image/jpg",
      },
    ],
  },
  overrides: {
    layoutIdentifier: "your-layout-identifier",
  },
});

import { Novu } from "@novu/node";
const novu = new Novu("<NOVU_API_KEY>");
novu.trigger("workflow-identifier", {
  to: {
    subscriberId: "<SUBSCRIBER_ID>",
  },
  payload: {
    attachments: [
      {
        file: fs.readFileSync(__dirname + "/data/test.jpeg"),
        name: "test.jpeg",
        mime: "image/jpg",
      },
    ],
  },
  overrides: {
    layoutIdentifier: "your-layout-identifier",
  },
});

The layout specified will be used for all emails in the context of that trigger event.

However, it's important to note that the override layout on trigger functionality is only available on v0.19.0 and later versions.

Your curl command seems to be using the correct structure for the override. If you're experiencing issues with code-first workflows but not with dashboard-created workflows, it might be related to how the workflows are defined or how they interact with layouts.

Since I don't have specific information about your code-first workflow implementation or the exact version of Novu you're using, I can't provide a definitive answer. If the issue persists, you might want to double-check your workflow definition and ensure you're using a compatible version of Novu.

If you need further assistance, I suggest clicking on the "Ask for help" button to tag a team member who can review your specific setup and provide more tailored advice.

Sources
[1] Layouts

Ask Inkeep•7/15/24, 6:37 AM

Feel free to tag @Ask Inkeep with additional questions.

Dima Grossman•7/15/24, 7:02 AM

Hi @Dragan for code first workflows, layouts are not applied. Layouts can be managed an reused from your code. In case you are working with React Email, it's as simple as reusing a react component.

Dima Grossman•7/15/24, 7:02 AM

Layout overrides and management in the UI, is only relevant for legacy UI based workflows

DraganOP•7/15/24, 7:26 AM

@Dima Grossman I am using NodeJs. So I can only send the body from the workflow. Am I able to have a <head> tag in any way? (I want to load something there)

Dima Grossman•7/15/24, 7:27 AM

Using the @novu/framework definition?

Dima Grossman•7/15/24, 7:27 AM

the body returned from the step can have the whole HTML content

Dima Grossman•7/15/24, 7:27 AM

including the head

DraganOP•7/15/24, 7:28 AM

yes, I'm using @novu/framework. Ok, i'll try that out

DraganOP•7/15/24, 8:56 AM

Here's what I have so far when loading a stylesheet in the head tag:
For code first workflows (I send the entire html as the body):

In the preview in the dashboard I can see the styles applied
When I get the email the styles are missing
For UI created workflows:
The styles are applied both in the preview and in the actual mail

Novu_Bot•7/15/24, 8:56 AM

@Dragan, you just advanced to level 2!

Dima Grossman•7/15/24, 9:12 AM

Do you have an example you can share of an html body sent?

DraganOP•7/15/24, 9:18 AM

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
<style>
.logo {
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class="grid">
<div class="col-6 flex align-content-center flex-wrap">
<div class="text-left p-3 font-bold text-3xl">
Your updates
</div>
</div>
<div class="col-6 flex justify-content-end flex-wrap">
<img class="p-3 logo" src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Seal_of_Los_Angeles.svg"/>
</div>
</div>

<div class="pl-3 pb-3">Hello </div>
<div class="pl-3">Information...</div>

<div class="grid">
<div class="col-12">
<div class="text-left pl-3 border-round-sm bg-primary font-bold">
City of LA
</div>
</div>
</div>
</body>
</html>

DraganOP•7/16/24, 7:10 AM

any updates on this?

Dima Grossman•7/21/24, 7:40 AM

@Pawan Jain do we have any updates on the styling and embeds of css sheets? I saw a similiar ticket on this a few days back.

Pawan Jain•8/1/24, 2:48 AM

@Dragan

Apologies for missing this. I wan to check if you are still facing this issue?

import { Novu } from "@novu/node"; const novu = new Novu("<NOVU_API_KEY>"); novu.trigger("workflow-identifier", { to: { subscriberId: "<SUBSCRIBER_ID>", }, payload: { attachments: [ { file: fs.readFileSync(__dirname + "/data/test.jpeg"), name: "test.jpeg", mime: "image/jpg", }, ], }, overrides: { layoutIdentifier: "your-layout-identifier", }, });

layoutIdentifier override not working

Answer

Similar Threads

Similar Threads

Answer

Similar Threads