Load predefined data from columns and update field with possible selection with Javascript
I am struggling with piece of code. I am working on SharePoint 2013 and I am trying to set 2 fields fixed when creating a new item in list. All 3 fields are lookup columns, but the red highlighted fields I want to set as fixed and the yellow highlighted field is conditioned by the field Vyberova_Skupina_Sluzba Also Vyberova_Skupina_Sluzba is conditioned by the field Vyber_Oblast I used the part of the code below, the fields are fixed Vyber_Oblast and Vyberova_Skupina_Sluzba but third column is not updated. function nastavSluzba(){ $('#Produktova_Skupina_Sluzba').find('select').val('Hypotekárne úvery'); $('#Vyber_Oblasti').find('select').val('Úverové produkty pre FO') $('#tableNapoveda').remove(); $("#Vyber_Oblasti").find('select').attr("disabled", true); $("#Produktova_Skupina_Sluzba").find('select').attr("disabled", true); $("#Vyber_Oblasti").find('select').css({"background-color": "white","color": "black"}); $("#Produktova_Skupina_Sluzba").find('select').css({"background-color": "white","color": "black"}); var allOptions = document.querySelectorAll("[title=Vyber_Oblasti] option"); [].some.call(allOptions, function(option) { if (option.innerHTML == "Úverové produkty pre FO") { option.selected = "Úverové produkty pre FO"; return true; } }); var allOption = document.querySelectorAll("[title=Produktova_Skupina_Sluzba] option"); [].some.call(allOption, function(option) { if (option.innerHTML == "Hypotekárne úvery") { option.selected = "Hypotekárne úvery"; return true; } }); Can you help me make sure that the third field is loaded automatically and that the user can select an option that falls under Produktova_Skupina_Sluzba ?News Web Part rendering issues
Is anyone noticing major rendering issues with the SharePoint Online News web part? The issues are similar to this post... https://techcommunity.microsoft.com/t5/sharepoint/changes-to-top-story-news-web-part/m-p/2586536 ...but the impact is also on other 'Layout' types. It is almost as if Microsoft have broken their CSS or something, as the images used in news item banners are rendering as full size, rather than being cropped and having a gradient applied (to ensure text is readable in the web part). My configuration of the web part is as shown below (or attached), and I can confirm that this issue is happening in multiple tenants, and mulitple site collections. In fact, I can't find any site collection where this issue ISN'T occurring. Be very keen to hear of others experiencing this, and would be grateful if others could test this in their own tenants to see how widescale the problem is. Thanks, JoeSharePoint : Workflow > Send an Email > Customizations (CSS)
Hello everyone, I'm customizing the body of an email send by SharePoint's Workflow action "Send an Email". Knowing that this action does not support what's inserted in the <style></style> tags and the only way is to do it inline within the target html tags, I'm currently facing the following issue: somewhere in my email's body text, I'm getting the value of a specific item's field (example: [%CurrentItem:Body%] which can contain images in between of the text. How can I apply the css in order to set this images' width? Thanks in advance! Kind regards, Duarte
How to stop CSS to be applied to a part of layout on the samepage, (wikipage)
I have created a SharePoint Page using Wiki page option. - I used the two column option and created the page. Added the html code for accordions using the Js and some css style I did that by using Insert-> Embedded code -> added the code in the box and it was added as a webpart and it solved my purpose. - But here is a new problem, I don't want the CSS to be applied to the other column of the page. How to avoid that. Also, I want to change the color of the alternate header to grey, any code for that would really help, thank you. please help Best Regards <script src="..//SiteAssets/jquery-2.0.2.min.js"></script> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>Untitled</title> <style> /*** CSS for collapsable headers ***/ /*** Expanded h2 ***/ #DeltaPlaceHolderMain h2:before { display: inline-block; margin-right: .5em; border-radius: 2em; padding: 0 .05em .05em ; background: black; color: #fff; cursor: pointer; vertical-align:middle; font: bold 0.8em/0.8 verdana, sans-serif; content: '\2212'; /* math operators minus sign */ } /*** Collapsed h2 ***/ #DeltaPlaceHolderMain h2.expand:before { content: '\2b'; /* basic latin plus sign */ } </style> </head><body> <div id="DeltaPlaceHolderMain"> </div> VishnuSet width for `PivotItem` in Office UI Fabric
I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned. I need to display the tabs with equal width so that they occupy the 100% width of the page. Below is the code for Pivot. <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}> <PivotItem headerText="Foo"> <Label>Pivot #1</Label> </PivotItem> <PivotItem headerText="Bar"> <Label>Pivot #2</Label> </PivotItem> <PivotItem headerText="Bas"> <Label>Pivot #3</Label> </PivotItem> <PivotItem headerText="Biz"> <Label>Pivot #4</Label> </PivotItem> </Pivot> Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem. const pivotStyles:IPivotStyles = { link: {}, linkContent: {}, linkIsSelected: {}, text: {}, icon: {}, count: {}, root: { //background: DefaultPalette.greenDark } }; How can I apply style to PivotItem so that I can add width to it?List View Format Stopping at 10 items
I am trying to implement the Profile Card view (https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/profile-card) onto a list of people with about 100 items. However, when I apply it it only loads the first 10 items. It works okay if I remove the float:left but then I just have one long column, which is not what I'm going for. Has anyone else experienced this? I'm not a CSS master unfortunately. Here is a shortened version: { "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>", "hideSelection": true, "hideListHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "flex-direction": "column", "align-items": "center", "justify-content": "space-around", "min-width": "300px", "min-height": "200px", "border-radius": "8px", "margin-right": "10px", "margin-bottom": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "attributes": { "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover" }, "children": [ { "elmType": "div", "children": [ { "elmType": "img", "style": { "display": "block", "height": "auto", "max-height": "96px", "max-width": "96px", "border-radius": "50%" }, "attributes": { "src": "= @currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$Person.email] + '&UA=0&size=HR48x48'", "title": "[$Person.title]" } } ] }, { "elmType": "div", "style": { "text-align": "center" }, "children": [ { "elmType": "div", "style": { "font-weight": "500", "font-size": "1.5rem" }, "txtContent": "[$Person.title]" } ] } ] } }
How to change the default custom colors in a SharePoint calendar
Hi All, I can use category and overlays to apply custom colors on items in a SharePoint calendar BUT the default colors are not very good (well IMHO). I woud like to see Yellow, Orange etc) I have seen how to add a New css file but do not do not know how to make it etc. Any other solution or is there someplace I can find the css file? Thanks Bert
SharePoint Online-Communication Site- Script Editor apply changes to all pages
I am using a SPFX Script Editor to make color changes on the Header of the Home Page. Now, when I visit other pages in the SharePoint site like-Site Contents, I don't see the changes applied to the header. How can I ensure that the changes are applied across the site? Is it possible to edit the master page on the Communication site?What is the best practice to inject js or css files in PnP Template Provisioning
I am using PnP template provisioning xml templates. I would like to inject some js and css files like for example jquery. I try to do this with the custom action but I don't like this solution. I do it now like this: <!-- css --> <pnp:CustomAction Name = "CustomCss" Location = "ScriptLink" Sequence = "1003" ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="{sitecollection}/Style%20Library/Custom/custom.css?v=1.0"></link>');" /> <!-- js --> <pnp:CustomAction Name = "jquery" Location = "ScriptLink" Sequence = "0" ScriptBlock = "
 var headID = document.getElementsByTagName('head')[0]; 
 var newScript = document.createElement('script');
 newScript.type = 'text/javascript';
 newScript.src='{sitecollection}/Style%20Library/custom/jquery.js?v=1.15';
 newScript.id = 'jquery';
 headID.appendChild(newScript);" />Getting Started with React and SharePoint - From a UX Designer/Developer's Perspective
If you've been keeping watch on the new SharePoint Framework you have undoubtedly read or experienced the dichotomy of extremely basic "Hello World" articles and if not basic, then articles written by hard core-code-ninja programmers. If you’re a Designer, Developer or UX Practitioner trying to make sense of the React and Modern SharePoint Framework universe it can be difficult reconciling these two very different spectra. From a UX Practitioner's standpoint we need to know enough about Development to strategically understand what's possible in Design, while attempting to make a User’s experience better. That middle ground of development and design when focused inside of SharePoint helps to build exciting experiences and promote healthy User Adoption. The goal of this 5-part series is targeted at the hybrid role of Designer, Developer and UX Practitioner in an attempt to navigate through some of the poorly documented and major hurdles of React Development. Part 1 – CSS tricks and working with syntax Part 2 – Integration of third party or legacy plug-ins Part 3 – Images, SVG graphics and Components Part 4 – REST call to a SharePoint List and displaying the results Part 5 – Building a super cool React Modern SharePoint Web Part React SharePoint Modern Framework Web Part – we will be building this in Part 5 of this series. Alright, enough talk let’s get started. Part 1 CSS in React Ok so if you’re like me and have been using traditional CSS for almost 20 years, CSS inside React at first... is a little painful. There is an in-depth blog post written by Agata Krzywda about CSS and React https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 detailing almost every situation and use case. The article mentioned by Agata is very helpful for understanding CSS and React, but what the article doesn’t take into account are the real-world syntactical oddities that we run into on a daily basis, which like I’ve mentioned are generally missing from 80% of online React documentation. The SPFX team at Microsoft has done a great job by giving us the SPFX boiler plate webpart that generates the code below. Deciphering the CSS in the SPFX boiler plate has a pretty steep learning curve partially because the boiler plate project hides some key ingredients that if you are not outwardly looking for them, you'll miss out on the learning experience. Example the Office Fabric .css file is buried in the node_modules folder and is not referenced through import in the head of the page... so if you were trying to understand where "ms-bgColor-themeDark" is being referenced its completely confusing... Let's take a look at Lines 11, 14. Line 11: <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}> Line 14: <div className={"ms-font-1 ms-fontColor-white"}> These two lines show different ways to use CSS in React that mimic 90% of the web at large. Now Let's look at Line 16. Notice there's some different stuff going on here... "styles" is the imported reference to the scss file and "label" is the class name. Line16: <div className={styles.label}> * The big take away here is that CSS in React has multiple ways to use it, and you can choose which works best for you depending on your situation. Below are some extremely useful and hard to find syntactical variations of CSS in React, that go beyond the CSS article written by Agata and that also extend the SPFX boiler plate example from Microsoft. Here are a few super helpful examples of className syntactical combinations Multiple class names with hyphens concatenated together while still referencing the import iconstyles module. className={[iconstyles["glyphicon"], iconstyles["glyphicon-star-empty"]].join(' ')} Entire string of static classes in a string with a variable name inside the string <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}> Multiple static classes along with a variable name concatenated together className={[`mix`, `all`, item.Category ].join(' ')} Class name as a static string. Notice the use of this ( ` ) not ( ‘ ) or ( “ ) className={`mix`} Class used classically in a variable as larger static string const htmlstring = ` <div class="row mixitup-wrapper"></div>`; This table hopefully saves a fellow Designer, Developer or UX Practitioner some time and effort, I know while I was picking up React each variation of CSS was a watershed moment. In Part 2 of this series we are going to hammer out how to work with third party plug-ins inside React like JQuery, Bootstrap and MixitUp.
