Style a custom renderer via CSS

How do we make use of a CSS file for styling a custom renderer.

In src/renderers.js i have created a custom renderer called, renderArray,

which looks something like this:-

renderArray = data => {
  return {
    text: data.array
      .map((each, index) => {
        let textToPrint = "";
        textToPrint =
          textToPrint +
          `<div class="card">`+
            `<img src="img_avatar.png" alt="Avatar" style="width:100%">`+
            `<div class="container">`+
              `<h4><b>${each.name}</b></h4>`+
              `<p>${each.position}</p>`+
            `</div>`+
          `</div>`
          
        return `${textToPrint}`;
      })
      .join("\r\n\r\n\r\n"),
    markdown: true,
    typing: "2s"
  }
};

How can i import a CSS file, so that the class properties takes effect ?

Hello :slight_smile:

If you want to do something in CSS, you should take a look at this.
There’s a param inside the snippet (customStylesheet) to apply style on what you want in the bot.

2 Likes

hey can you tell me how you used this renderer.
I created a renderer in the renderer.js file just like yours. Registered it in index.js file using bp.renderer.register() but I don’t know how to use it.

renderTransactions = data => {
    return { 
        text: data
        .map((each, index) => `${index + 1} ) ${each.name} \n\n `)
        .join('\r\n'),
        typing: '2s',
        markdown: true
    }
  }
module.exports = {renderTransactions}
bp.renderers.register('#table', renderTransactions)

I am kind of confused right now? Any help will be appriciated.

I have tried it for v10.

You need to create an action to use it.
Read more about custom actions here :

  1. Create an action. Call renderer from the action, pass the required data.
  2. Register it.
  3. Use the action in the Flow .

Something Like this

// render Transaction(s)
async function renderTransaction (state, event) {
  await event.reply("#table", { trasactions : transactions });
};

You ll be able to access this transaction dictionary in your renderer as data.transactions

I have to add this line in the action.js right?
Sorry I am new in this so pardon if the query is too basic. Here’s my action method which is using renderTransactions method:

async function getTransactionDetails(state, event, params) {
    data=[{name:may,amount:10},{name:hari, amount:1}]
    await event.reply("#table", { trasactions : data });
}

Am I using the renderer correctly? Because I’m getting no reply after implementing this way.

PS:
Thanks man it’s working now there were some minor problems. Cheers.

You can use extraStylesSheet property to point it to your existing custom style sheet. This is for v11 and v12.

image

For more details check out this blog

from where we can find the mentioned file ?