Blox conditional formatting up and down indicators
Hi, I currently have conditional formatting for a blox widget. Based on the percentage change, it changes the font color (green or red) and a up or a down arrow. However, instead of the arrows I want a textblock with a background color. I tried taking a stab at it but it's changing the entire widget color. Attaching my current CSS snipet. Thank you { "style": "", "script": "", "title": "", "showCarousel": false, "conditions": [ { "minRange": "-Infinity", "maxRange": 2000, "backgroundColor": "#fd6e69" }, { "minRange": 2000, "maxRange": 10000, "backgroundColor": "#FAA0A0" }, { "minRange": 10000, "maxRange": "Infinity", "backgroundColor": "#3adcca" } ], "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "spacing": "small", "items": [ { "type": "ColumnSet", "height": "40px", "style": { "border-radius": "6px 6px 0px 0pc", "background-image": "linear-gradient(330deg, #F7941D 10%, #703971)", "box-shadow": "1px 1px 2px #a6a4a4" }, "columns": [ { "type": "Container", "style": {}, "items": [ { "type": "TextBlock", "id": "", "class": "", "text": "Accounts Receivable", "horizontalAlignment": "left", "style": { "color": "#edeef0", "font-weight": "500", "font-size": "12px", "margin": "15px 0px 15px 10px" } } ] }, { "type": "Image", "id": "", "class": "", "url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg", "altText": "image descriptions", "style": { "margin": "0px 10px", "width": "20px" } } ] }, { "type": "Container", "style": { "background-color": "#FFFFff", "margin-bottom": "1px", "border-radius": "0px 0px 6px 6px", "box-shadow": "1px 1px 10px #a6a4a4" }, "items": [ { "spacing": "none", "type": "ColumnSet", "columns": [ { "spacing": "medium", "separator": "true", "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "left", "text": "Total", "weight": "bold", "color": "grey", "size": "medium" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "style": { "flex-grow": "0" }, "items": [ { "spacing": "none", "horizontalAlignment": "left", "type": "TextBlock", "text": "{panel:Total AR_AMOUNT}", "weight": "bold", "color": "#232a2f", "size": "large", "style": { "margin": "0px" } } ] }, { "spacing": "small", "type": "Container", "items": [ { "type": "Image", "class": "conditional_image", "size": "small", "spacing": "none", "horizontalAlignment": "center" } ] }, { "spacing": "none", "type": "Container", "style": { "flex-grow": "100" }, "items": [ { "spacing": "small", "type": "TextBlock", "class": "condition_data", "text": "5000%", "horizontalAlignment": "center", "size": "small", "weight": "bold", "color": "red" } ] } ] }, { "type": "TextBlock", "horizontalAlignment": "left", "text": "Insurance", "weight": "light", "color": "grey", "size": "small", "spacing": "none" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "style": { "flex-grow": "0" }, "items": [ { "spacing": "small", "horizontalAlignment": "left", "type": "TextBlock", "text": "{panel:AR_insurance}", "weight": "bold", "color": "#232a2f", "size": "medium", "style": { "margin": "0px" } } ] }, { "type": "Column", "items": [ { "spacing": "none", "horizontalAlignment": "left", "type": "TextBlock", "text": "2.5%", "weight": "bold", "color": "#232a2f", "size": "small", "style": { "margin": "10px 0px 0px 30px" } } ] }, { "type": "Column", "style": { "flex-grow": "100" }, "items": [ { "type": "Image", "class": "conditional_image indexsp-stock", "url": "/plugins/BloX/blox-images/StockMarket/arrow-up.png", "style": { "margin": "0px 0px 0px 0px" }, "size": "small", "spacing": "none" } ] } ] }, { "type": "TextBlock", "horizontalAlignment": "left", "text": "Patient", "weight": "light", "color": "grey", "size": "small" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "style": { "flex-grow": "0" }, "items": [ { "spacing": "small", "horizontalAlignment": "left", "type": "TextBlock", "text": "{panel:AR_patient}", "weight": "bold", "color": "#232a2f", "size": "medium", "style": { "margin": "0px" } } ] }, { "type": "Column", "items": [ { "spacing": "none", "horizontalAlignment": "left", "type": "TextBlock", "text": "-4%", "weight": "bold", "color": "#232a2f", "size": "small", "style": { "margin": "10px 0px 0px 30px" } } ] }, { "type": "Column", "style": { "flex-grow": "100" }, "items": [ { "type": "Image", "class": "conditional_image indexsp-stock", "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png", "style": { "margin": "0px 0px 0px 0px" }, "size": "small", "spacing": "none" } ] } ] }, { "type": "TextBlock", "horizontalAlignment": "left", "text": "Other", "weight": "light", "color": "grey", "size": "small" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "style": { "flex-grow": "0" }, "items": [ { "spacing": "small", "horizontalAlignment": "left", "type": "TextBlock", "text": "$0", "weight": "bold", "color": "#232a2f", "size": "medium", "style": { "margin": "0px" } } ] }, { "type": "Column", "items": [ { "spacing": "none", "horizontalAlignment": "left", "type": "TextBlock", "text": "0%", "weight": "bold", "color": "#232a2f", "size": "small", "style": { "margin": "10px 0px 0px 30px" } } ] }, { "type": "Column", "style": { "flex-grow": "100" }, "items": [ { "type": "Image", "class": "conditional_image indexsp-stock", "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png", "style": { "margin": "0px 0px 0px 0px" }, "size": "small", "spacing": "none" } ] } ] } ] } ] } ] } ] } ] } ] }4.5KViews0likes3Comments
trying to use arrow indicators in blox to compare impressions between two different years
Hi Community, Is there a way someone may kindly assist me with how can I use BloX to create red and green arrows indicator to show an increase or decrease in impressions by comparing different year of the same campaign? Please kindly assist 🙂2.5KViews0likes3CommentsNew Blox Border Snippet
I cannot figure out where in the editor to place the border snippet code to keep my blox widget from using the system defaulted corner radius. No matter where I place it the corners of the widget remain rounded. { "spaceAround": "none|small|medium|large", "cornerRadius": "none|small|medium|large", "borderColor": "", "shadow": "none|light|medium|dark" }Solved2.4KViews0likes2CommentsMultiple Dropdown filter using BloX
Hi, I'm trying to create a multiple dropdown filters, but can't figure what I'm doing wrong to make the filters work. Any assistance will be much appreciated. my Script { "type": "AdaptiveCard", "Version": "1.0", "style": "", "script": "", "title": "", "showCarousel": true, "titleStyle": [ { "display": "none" } ], "backgroundColor": "", "body": [ { "type": "ColumnSet", "spacing": "none", "columns": [ { "type": "Column", "separator": "none", "spacing": "medium", "items": [ { "type": "TextBlock", "text": "Department Filter", "weight": "bold" }, { "type": "Container", "spacing": "none", "width": "240px", "height": "50px", "style": { "color": "black", "padding-top": "10px", "margin-left": "1px", "backgroundColor": "white" }, "items": [ { "type": "Input.ChoiceSet", "id": "data.filters[0].filterJaql.members[0]", "class": "dropdownChoices", "value": "", "displayType": "compact", "choices": "{choices:Team}", "style": { "color": "Black", "font-weight": "medium", "padding-left": "1px", "margin-left": "10px", "border": "2px solid grey", "height": "35px", "font-size": "14px" } } ] }, { "type": "TextBlock", "text": " " } ] }, { "type": "Column", "separator": "none", "spacing": "medium", "items": [ { "type": "TextBlock", "text": "Status Filter", "weight": "bold" }, { "type": "Container", "spacing": "none", "width": "240px", "height": "50px", "style": { "color": "black", "padding-top": "10px", "margin-left": "1px", "backgroundColor": "white" }, "items": [ { "type": "Input.ChoiceSet", "id": "data.filters[0].filterJaql.members[0]", "class": "dropdownChoices", "value": "", "displayType": "compact", "choices": "{choices:Status-1}", "style": { "color": "Black", "font-weight": "medium", "padding-left": "1px", "margin-left": "10px", "border": "2px solid grey", "height": "35px", "font-size": "14px" } } ] } ] }, { "type": "Column", "separator": "none", "spacing": "medium", "items": [ { "type": "TextBlock", "text": "Mission Status", "weight": "bold" }, { "type": "TextBlock", "text": "{panel: Date" }, { "type": "TextBlock", "text": "Mission Status" } ] } ] } ], "actions": [] } What I want to achieve Thank you1.5KViews0likes1Comment
Amend a Granularity button to filter as well
Good day all, Can someone please assist me with creating a custom action, I have tried everything but I cannot get it to work I have these date granularity buttons, But I need the button to affect the dashboard as well if a selection is made Here are my buttons { "style": "", "script": "", "title": "", "titleStyle": [ { "display": "none" } ], "showCarousel": true, "body": [], "actions": [ { "type": "dynamicGranSwap", "title": "Months", "style": { "background-color": "#1D426C" }, "data": { "widgetToModify": [ "65f1604d8f23ac0033253ddd" ], "filterJaql": { "explicit": true, "multiSelection": true, "members": [ "1" ] }, "dim": { "title": "Month_End", "table": "Calendar", "column": "Month_End", "datatype": "Int" } }, "dategran": "months" }, { "type": "dynamicGranSwap", "title": "Days", "style": { "background-color": "#D3D3D3" }, "data": { "widgetToModify": [ "65f1604d8f23ac0033253ddd" ] }, "dategran": "days" } ], "dateFilters": { "dim": { "title": "Month_End", "table": "Calendar", "column": "Month_End", "datatype": "Int" }, "title": "Month_End", "column": "Month_End", "table": "Calendar", "datatype": "Int", "level": "days", "filter": { "last": { "count": 8, "offset": 0 } } } } And here is the dynamicGranSwap Action // Holds the chosen granularity from the selected button 'months' for example const dategran = payload.dategran; const widgetIds = payload.data.widgetToModify; var filtername = "Month_End"; //Change the background color for unselected buttons payload.widget.style.currentCard.actions.forEach(function (i) { i.style["background-color"] = '#D3D3D3'; }); //Change the background color for selected buttons payload.widget.style.currentCard.actions .filter(i => i.dategran == dategran)[0].style["background-color"] = "#1D426C"; //Redraw the changes payload.widget.redraw(); //For each widget change the data granularity and update filter Jaql if widget has filter controls widgetIds.forEach(function (widgetId) { const widget = payload.widget.dashboard.widgets.$$widgets.find(widget => widget.oid === widgetId); if (widget) { // Change the level of granularity to the chosen value from our button: 'months' for example widget.metadata.panels[0].items[0].jaql.level = dategran; // Apply changes to Mongo widget.changesMade('someEvent', ['metadata', 'properties_changed']); // Refresh widget widget.refresh(); // Update filter Jaql if widget has filter controls const filterControl = widget.metadata.controls && widget.metadata.controls.find(control => control.type === "Filters"); if (filterControl && filterControl.data.filters && filterControl.data.filters.length > 0) { const filterJaql = filterControl.data.filters[0].filterJaql; if (filterJaql) { if (dategran === "months") { filterJaql.name = filterName; filterJaql.explicit = true; filterJaql.members = ["1"]; // Update members as needed } else if (dategran === "days") { filterJaql.name = filterName; filterJaql.explicit = false; filterJaql.multiSelection = true; filterJaql.all = true; } } } } }); And these are the filters, if Daily is selected: "filters": [ { "filterJaql": { "explicit": false, "multiSelection": true, "all": true }, "dim": { "title": "Month_End", "table": "Calendar", "column": "Month_End", "datatype": "Int" } } ] And this if Months are selected: "filters": [ { "filterJaql": { "explicit": true, "multiSelection": true, "members": [ "1" ] }, "dim": { "title": "Month_End", "table": "Calendar", "column": "Month_End", "datatype": "Int" } } ]1.1KViews0likes1Comment
Widget displaying differently in edit versus view mode
I have a few widgets on my dashboard that are only displaying correctly when I click into the edit mode on them. When I am viewing the whole dashboard, they are not appearing correctly. Any reason why this might be happening? ThanksSolved1.8KViews0likes6CommentsBlox formatting for PDF download
Hi there, I am developing a dashboard with multiple Blox (6) in a page that requires it to look like it is one table. The reason behind this is the nature if required layout and the way data is modelled. I was able to achieve something close to this by adjusting the margins, padding and spacing in the CSS script. But when I download it as pdf something weird is going on causing spaces after every blox. The first 2 blox are fine but the rest have these gaps in between them. Attaching the dashboard script and CSS script. Any. help here is much appreciated. Thanks in advance.Solved5.5KViews0likes8CommentsCustom cell formatting in Pivot
I want a table or pivot table but the cells are full size blocks/tiles that effectively look like this: The number will be a calculated function ddiff(date, now) but the text "days" needs to appear, the cell should be a box etc.. Is this something i even want to debate tackling...1.1KViews0likes2Comments
