cancel
Showing results for 
Search instead for 
Did you mean: 

How to center align and create url action

tsaho8
7 - Data Storage
7 - Data Storage

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.

tsaho8_0-1680009371290.png

 

{
"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 2

Angelina_QBeeQ
10 - ETL
10 - ETL

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
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

Angelina_0-1680513772099.png

Action alignment is defined in the Configuration tab.

Angelina_1-1680513850580.png

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

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:
tsaho8_0-1681207584675.png

Required output:

tsaho8_1-1681207628831.png

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

Regards,

Tulu