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.6KViews0likes3Comments
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.6KViews0likes3CommentsNew 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.6KViews0likes1Comment
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.2KViews0likes1Comment
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.6KViews0likes8Comments
