Forum Discussion

tsaho8's avatar
tsaho8
Cloud Apps
03-28-2023

How to center align and create url action

Hi Team,

I am getting the below output using blox code. I want to make below rectangular container to circle and center align and apply URL action to it.

 

{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"spacing": "extraLarge",
"style": {
"backgroundImage": "linear-gradient(#F5A9AA, #E97EA3)",
"box-shadow": "0 1px 3px 1px rgba(58,67,86,0.1)",
"padding": "50px"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "large",
"weight": "bold",
"text": "SERVICING 360"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "medium",
"spacing": "small",
"text": "Open BloX Editor to customize filters"
}
]
},
{
"type": "Container",
"spacing": "extraLarge",
"width": "300px",
"Alignment": "center",
"style": {
"backgroundImage": "linear-gradient(#F5A9AA, #E97EA3)",
"box-shadow": "0 1px 3px 1px rgba(58,67,86,0.1)",
"padding": "20px"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "large",
"weight": "bold",
"text": "SERVICING 360"
}
]
}
],
"actions": [
{
"type": "Filters",
"title": "Contact Sense Overview",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Days in Date",
"filterJaql": {
"last": {
"count": 7,
"offset": 0
}
}
}
]
}
},
{
"type": "Filters",
"title": "Calls by Number of Topics",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Risk Level",
"filterJaql": {
"from": 4
}
}
]
}
},
{
"type": "Filters",
"title": "Top Topics",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Days Open",
"filterJaql": {
"from": 90
}
}
]
}
},
{
"type": "Filters",
"title": "Pair Topics",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Days Open",
"filterJaql": {
"from": 90
}
}
]
}
}
]
}

2 Replies

Replies have been turned off for this discussion
  • Hi tsaho8 ,

    You can use "OpenURL" action for this.
    To make a circle, you need to define the size of the button as a square, and then round the corners.
    Here is the sample of what you can get with script:

    {
        "style": "",
        "script": "",
        "title": "",
        "showCarousel": true,
        "body": [
            {
                "type": "ActionSet",
                "actions": [
                    {
                        "style": {
                            "height": "230px",
                            "width": "230px",
                            "font-size": "20pt",
                            "font-weight": "bold",
                            "backgroundImage": "linear-gradient(#F5A9AA, #E97EA3)",
                            "color": "white",
                            "border-radius": "50%"
                        },
                        "type": "Action.OpenUrl",
                        "title": "SERVICING 360",
                        "url": "https://www.sisense.com/sisense-labs/"
                    }
                ]
            },
            {
                "type": "ActionSet",
                "actions": [
                    {
                        "type": "Filters",
                        "title": "Contact Sense Overview",
                        "data": {
                            "filters": [
                                {
                                    "filterName": "Stage",
                                    "filterJaql": {
                                        "explicit": true,
                                        "members": [
                                            "Prospect"
                                        ]
                                    }
                                },
                                {
                                    "filterName": "Days in Date",
                                    "filterJaql": {
                                        "last": {
                                            "count": 7,
                                            "offset": 0
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    {
                        "type": "Filters",
                        "title": "Calls by Number of Topics",
                        "data": {
                            "filters": [
                                {
                                    "filterName": "Stage",
                                    "filterJaql": {
                                        "explicit": true,
                                        "members": [
                                            "Prospect"
                                        ]
                                    }
                                },
                                {
                                    "filterName": "Risk Level",
                                    "filterJaql": {
                                        "from": 4
                                    }
                                }
                            ]
                        }
                    },
                    {
                        "type": "Filters",
                        "title": "Top Topics",
                        "data": {
                            "filters": [
                                {
                                    "filterName": "Stage",
                                    "filterJaql": {
                                        "explicit": true,
                                        "members": [
                                            "Prospect"
                                        ]
                                    }
                                },
                                {
                                    "filterName": "Days Open",
                                    "filterJaql": {
                                        "from": 90
                                    }
                                }
                            ]
                        }
                    },
                    {
                        "type": "Filters",
                        "title": "Pair Topics",
                        "data": {
                            "filters": [
                                {
                                    "filterName": "Stage",
                                    "filterJaql": {
                                        "explicit": true,
                                        "members": [
                                            "Prospect"
                                        ]
                                    }
                                },
                                {
                                    "filterName": "Days Open",
                                    "filterJaql": {
                                        "from": 90
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }

    Action alignment is defined in the Configuration tab.

    Always here to help,
    Angelina from QBeeQ
    [email protected]
    QBeeQ  - Gold Implementation and Development Partner

    • tsaho8's avatar
      tsaho8
      Cloud Apps

      Hi Angelina_QBeeQ ,

      Thanks Angelina for your support.

      Now I am able to create url action in Sisense by taking your inputs but now just to make more customize I need your support again.

      Below is my blox code & output:

      {
      "style": "",
      "script": "",
      "title": "",
      "showCarousel": true,
      "backgroundImage": "",
      "body": [
      {
      "type": "Container",
      "style": {
      "backgroundImage": "linear-gradient(#5CACEB, #5CACEB)",
      "box-shadow": "0 0px 0px 0px rgba(58,67,86,0.1)",
      "padding": "1px"
      },
      "items": [
      {
      "type": "ColumnSet",
      "columns": [
      {
      "type": "Column",
      "separator": true,
      "items": [
      {
      "type": "Image",
      "horizontalAlignment": "center",
      "size": "medium"
      },
      {
      "type": "ActionSet",
      "actions": [
      {
      "type": "Action.OpenUrl",
      "title": "Phone channel Unstructured data Summary",
      "style": {
      "align-self": "center",
      "font-weight": "bold"
      },
      "target": "_self",
      "size": "large"
      }
      ]
      }
      ]
      },
      {
      "type": "Column",
      "separator": true,
      "items": [
      {
      "type": "Image",
      "horizontalAlignment": "center",
      "size": "medium"
      },
      {
      "type": "ActionSet",
      "actions": [
      {
      "type": "Action.OpenUrl",
      "title": "Number of Topics distribution by individual topic",
      "style": {
      "align-self": "center",
      "font-weight": "bold"
      },
      "target": "_self",
      "size": "large"
      }
      ]
      }
      ]
      },
      {
      "type": "Column",
      "separator": true,
      "items": [
      {
      "type": "Image",
      "horizontalAlignment": "center",
      "size": "medium"
      },
      {
      "type": "ActionSet",
      "actions": [
      {
      "type": "Action.OpenUrl",
      "title": "Distribution of topics",
      "style": {
      "align-self": "center",
      "font-weight": "bold"
      },
      "target": "_self",
      "size": "large"
      }
      ]
      }
      ]
      },
      {
      "type": "Column",
      "separator": true,
      "items": [
      {
      "type": "Image",
      "horizontalAlignment": "center",
      "size": "medium"
      },
      {
      "type": "ActionSet",
      "actions": [
      {
      "type": "Action.OpenUrl",
      "title": "Distribution of topics (including topic combination)",
      "style": {
      "align-self": "center",
      "font-weight": "bold"
      },
      "target": "_self",
      "size": "large"
      }
      ]
      }
      ]
      }
      ]
      }
      ]
      }
      ]
      }
      Output:

      Required output:

      There is difference in the design. kindly look into my code and suggest.

      Regards,

      Tulu