Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added ribbon-header #477

Merged
merged 1 commit into from Mar 6, 2022
Merged

Added ribbon-header #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 29 additions & 0 deletions form-samples/ribbon-header/README.md
View file
Open in desktop
@@ -0,0 +1,29 @@
# Ribbon Header

## Summary
This sample demonstrates displaying a ribbon in the header. The values of the `Title` column are displayed in the ribbon.

![screenshot of the sample](./assets/screenshot.png)

## View requirements

|Type |Internal Name|Required|
|-----------------------|-------------|:------:|
|Single line of text |Title |Yes |

## Sample

Solution |Author(s)
-------------------|---------------------------
ribbon-header.json |[Tetsuya Kawahara](https://twitter.com/techan_k)

## Version history

Version |Date |Comments
--------|-----------------|--------
1.0 |February 8, 2022 |Initial release

## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

<img src="https://pnptelemetry.azurewebsites.net/list-formatting/form-samples/ribbon-header" />
56 changes: 56 additions & 0 deletions form-samples/ribbon-header/assets/sample.json
View file
Open in desktop
@@ -0,0 +1,56 @@
[
{
"name": "pnp-list-formatting-ribbon-header",
"reponame": "ribbon-header",
"source": "pnp",
"title": "Ribbon Header",
"shortDescription": "This sample demonstrates displaying a ribbon in the header.",
"url": "https://github.com/pnp/List-Formatting/tree/master/form-samples/ribbon-header",
"longDescription": [
"This sample demonstrates displaying a ribbon in the header."
],
"creationDateTime": "2022-02-08T00:00:00.000Z",
"updateDateTime": "2022-02-08T00:00:00.000Z",
"products": [
"SharePoint",
"List Formatting"
],
"metadata": [
{
"key": "LIST-SAMPLE-TYPE",
"value": "Form"
},
{
"key": "SHAREPOINT-COMPATIBILITY",
"value": "SharePoint Online"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/List-Formatting/blob/master/form-samples/ribbon-header/assets/screenshot.png?raw=true",
"alt": "screenshot"
}
],
"authors": [
{
"gitHubAccount": "tecchan1107",
"pictureUrl": "https://github.com/tecchan1107.png",
"name": "Tetsuya Kawahara"
}
],
"references": [
{
"name": "Configure the list form",
"description": "You can configure the list form in a list or library with a custom header, footer and the form body with one or more sections with fields in each of those sections.",
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration"
},
{
"name": "Show or hide columns in a list or library form",
"description": "You can show or hide columns in a list or library form as an alternative to deleting them. When you hide a column, it doesn't affect the column or the data in the column, as it would if you delete it.",
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/list-form-conditional-show-hide"
}
]
}
]
Binary file added form-samples/ribbon-header/assets/screenshot.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
133 changes: 133 additions & 0 deletions form-samples/ribbon-header/ribbon-header.json
View file
Open in desktop
@@ -0,0 +1,133 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"justify-content": "center",
"width": "100%",
"margin-bottom": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"display": "flex",
"justify-content": "center",
"margin": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "80%",
"height": "85px",
"position": "relative",
"font-size": "20px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"bottom": "-0.7em",
"left": "-2.5em",
"border": "1.5em solid",
"border-right": "3em solid",
"border-left-color": "transparent",
"z-index": "1"
},
"attributes": {
"class": "ms-fontColor-themeSecondary"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"bottom": "-0.7em",
"right": "-2.5em",
"border": "1.5em solid",
"border-left": "3em solid",
"border-right-color": "transparent",
"z-index": "1"
},
"attributes": {
"class": "ms-fontColor-themeSecondary"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "100%",
"height": "100%",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"z-index": "3"
},
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "75%",
"border-top": "3px dashed",
"border-bottom": "3px dashed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "=if([$Title] == '', 'No Title' , [$Title])",
"style": {
"font-size": "22px",
"font-weight": "bold",
"margin": "10px"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"left": "0",
"top": "100%",
"z-index": "2",
"border-bottom": "solid 0.7em transparent",
"border-right": "solid 2em"
},
"attributes": {
"class": "ms-fontColor-themeDark"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"right": "0",
"top": "100%",
"z-index": "2",
"border-bottom": "solid 0.7em transparent",
"border-left": "solid 2em"
},
"attributes": {
"class": "ms-fontColor-themeDark"
}
}
]
}
]
}
]
}