Recently, I was editing a VS Code theme .json file.
I wanted to achieve Bold-Italic style for my theme, but I am confused in this part:
{
"name": "Keywords",
"scope": "keyword",
"settings": {
"foreground": "#8A31B9",
"fontStyle": "bold"
}
},
in "fontStyle": "bold" it will either take "bold" or "italic".
What should I do?
You add italic and bold in the same line.
{
"name": "Keywords",
"scope": "keyword",
"settings": {
"foreground": "#8A31B9",
"fontStyle": "bold italic"
}
},
Related
I know in Microsoft's ActionableMessage, one can have ActionSet which is clickable and you can have it open an URL.
But designs I am working with calls for something like this:
| Some Text. [Icon] |
Is there a way I can define AdaptiveColumn/AdaptiveColumnSet clickable UI element, such that one can open url?
I have found a kind of "hackable" way, where I have created a background with just icon.
Then I set the text in a column and set text value as Some Text
That "kind-of" works but now user has to click on that text. Click on the entire element doesn't work!!
There are many elements you can make clickable, check this here as an example:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Clicking this opens google",
"size": "Medium",
"weight": "Bolder",
"id": "googleButton"
},
{
"type": "Image",
"id": "Image",
"url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK2nG24AYDm6FOEC7jIfgubO96GbRso2Xshu1f8abSYQ&s",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
},
{
"type": "Container",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
},
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true,
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
}
]
}
]}
Many elements such as container, image etc have the "selectAction" property where you can define an onClick action
How does it look like in JSON if I want to have radio buttons for Yes / No,
Then if one answers Yes,
a checkbox on the Telephone / Email / Mobile shall be prompted?
SEE IMAGE HERE: https://i.stack.imgur.com/gvLuV.png
Here is how I am seeing it, but not sure if correct:
"checkboxTabs": [
{
"conditionalParentLabel": "RADIOGROUP",
"conditionalParentValue": "Yes_1",
"anchorString": "\\XL1\\",
"tabLabel": "Landline",
"tabGroupLabels": [
"checkboxgroup1"
]
},
{
"conditionalParentLabel": "RADIOGROUP",
"conditionalParentValue": "Yes_1",
"anchorString": "\\XE1\\",
"tabLabel": "Email",
"tabGroupLabels": [
"checkboxgroup1"
]
},
{
"conditionalParentLabel": "RADIOGROUP",
"conditionalParentValue": "Yes_1",
"anchorString": "\\XM1\\",
"tabLabel": "Mobile",
"tabGroupLabels": [
"checkboxgroup1"
]
}
],
"radioGroupTabs": [
{
"groupName": "RADIOGROUP",
"radios": [
{
"anchorString": "\\XY1\\",
"value": "Yes_1"
},
{
"anchorString": "\\XN1\\",
"value": "No_1"
}
]
}
]
You can do this with conditional fields. You would need to set the conditionalParentLabel and conditionalParentValue fields on the checkbox tabs so that the value for conditionalParentLabel matches the value for tabLabel in the parent tab. In this case the parent tab is the radio button. You would also need to set conditionalParentValue to "on." There is an example of what this json would look like here https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/conditional-fields/
We thought of a system like which is get meta data and data from backend, and use with these datas UI will render.
Some advantages for us:
Business-independent UI components.
Easy adaptation to channel-based business growth.
Example:
[
{
"popup": {
"title": "All Orders",
"row": [
{
"title": "An Order",
"image": {
"position": "LEFT",
"source": "my.jpg"
}
}
]
}
},
{
"orderDetail": {
"orderNumber": "test",
"orderDate": "test",
"platform": null,
"paymentType": "test"
}
}
]
Have you any suggestion for this, is that a good idea, what are the advantages and disadvantages according to you ?
Are there any tools you can recommend for this function?
I am new to coding and am using create-react-app to build my first app, and was wondering if it is possible to update the manifest.json file from within my app.
For example, if my folder structure is:
public
>index.hmtl
>manifest.json
src
>app.js
>index.js
would it be possible for me to write some code to update the contents of manifest.json? Or would that not work because it is not in the src folder?
The current contents of the manifest.json file are this:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
But let's say I wanted to change the "icons" array to this:
"icons": [
{
"firstName": "Jon",
"lastName": "Smith",
"id": "1"
}
Is that possible?
I want to change the color of an adaptive card output which comes from the database according to its value eg: if workhour < 6 = color of the adaptive card showing the work hours must be red. if it is greater than 6 hours the work hours must be displayed in green.
Any idea of how I must achieve this?
Below is a part of the JSON code along with data I call from the database.
Also, I will be implementing this on Microsoft Teams.
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Work Hours"
},
{
"$data": "${AttendanceMonthly}",
"type": "TextBlock",
"weight": "bolder",
"separator": true,
"text": "${WorkedHours}"
}
You can use if to set the color to attention or good.
See this example:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"$data": "${AttendanceMonthly}",
"type": "TextBlock",
"weight": "bolder",
"separator": true,
"color": "${if(WorkedHours < 6, 'attention', 'good')}",
"text": "Hours worked: ${WorkedHours}"
}]
Based on your Data this would make the text red for workedHours below 6. Have in mind that you can only set a color to "Attention", "Good" etc and not a color code directly.