Formatted column button doesn’t start the flow

I am having an issue, that none of the members of my organization can call a flow from a formatted column button in a Sharepoint list.

Below is the script used to create this button:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#create-a-button-to-launch-a-flow

Below is a screenshot of how this button is on my list, and works pretty fine for my user account.

enter image description here

When a team member clicks on the same button (using his account), the flow window comes up, but doesn’t show anything:

enter image description here

This is how I have granted permission to this team member runs this flow. Initially I have added him as a Run only member, also it didn’t work. Then I changed to Owner member, even though the issue is still there:

enter image description here

Does anyone have any light of what could be the issue?

Why is this expand/collapse all button not working in webpart?

I added a content editor webpart and added some code to it by linking it to an HTML file. I copied the code from https://codepen.io/heydon/pen/ZXgqKG It is a collapsible section web component with expand/collapse all buttons.

This code works when I test it in my Brackets software however, when I import it into SharePoint the menu keeps opening and closing immediately when i click the “expand all” button. It must stay open when clicked and close when I click the “collapse all” button.

Thank you in advance for your time and consideration!

<html> <head>     <style>         .wrapper {            margin: 0 auto;            max-width: 50em;            min-width: 18.75em;                     }         header, main, footer {             display: block;             text-align: center         }          h1, h2, h3 {                 font-family: Verdana, serif;                 color: #545f1d;                 font-weight: lighter;                 }         h1 {                 font-size: 4em;                 }         h2 {                 font-size: 1.3em;                 text-align: left;                 }         p {                 text-align: justify;                 font: 12pt/1.5 Verdana, Arial, Helvetica, "Luxi Serif", sans-serif;                 color: #000;                 }         /* button styling */          .controls {          text-align: right;          margin-bottom: 1em;         }          .controls li {           display: inline;         }          button {           background: green;           color: #fff;           border: 0;           font-size: 0.85rem;           border-radius: 0.25rem;         }          /*         Custom elements are inline by default         */         toggle-section {           display: block;         }          /*         Only applies if script runs and          `role="region"` is added         */         toggle-section[role="region"] {           border-width: 2px 0;           border-style: solid;         }          toggle-section[role="region"] + toggle-section {           border-top: 0;         }             </style>          <main>             <div class="wrapper">       <toggle-section open="false">         <h2 id="section-1">Section 1</h2>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non lectus sit amet nunc facilisis molestie. Praesent quis libero et mauris facilisis dignissim at sed nisi.</p>          <p>Nullam efficitur porttitor lectus, ac finibus nibh fermentum ac. Phasellus aliquam, nibh non efficitur pharetra, tellus diam posuere lectus, a consequat elit ex nec ligula.</p>       </toggle-section>       <toggle-section open="false">         <h2 id="section-2">Section 2</h2>         <p>Aliquam erat volutpat. Nulla facilisi. Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla.</p>          <p>Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis. Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.</p>       </toggle-section>             </div>         </main>      <script type="text/javascript">         (function() {       // Check for <template> support       if ('content' in document.createElement('template')) {         const tmpl = document.createElement('template')          // Create the web component's template         // featuring a <slot> for the Light DOM content         tmpl.innerHTML = `           <h2>             <button aria-expanded="false">               <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">                 <rect class="vert" height="8" width="2" y="1" x="4"/>                 <rect height="2" width="8" y="4" x="1"/>               </svg>             </button>           </h2>           <div class="content" hidden>             <slot></slot>           </div>           <style>             h2 {               margin: 0;             }              h2 button {               all: inherit;               box-sizing: border-box;               display: flex;               justify-content: space-between;               width: 100%;               padding: 0.5em 0;             }              h2 button:focus svg {               outline: 2px solid;             }              button svg {               height: 1em;               margin-left: 0.5em;             }              [aria-expanded="true"] .vert {               display: none;             }              [aria-expanded] rect {               fill: currentColor;             }           </style>         `         // Check for latest Shadow DOM syntax support         if (document.head.attachShadow) {           class ToggleSection extends HTMLElement {             constructor() {               super()                // Make the host element a region               this.setAttribute('role', 'region')                // Create a `shadowRoot` and populate from template                this.attachShadow({ mode: 'open' })               this.shadowRoot.appendChild(tmpl.content.cloneNode(true))                // Assign the toggle button               this.btn = this.shadowRoot.querySelector('h2 button')                // Get the first element in Light DOM               const oldHeading = this.querySelector(':first-child')               // and cast its heading level (which should, but may not, exist)               let level = parseInt(oldHeading.tagName.substr(1))               // Then take its `id` (may be null)               let id = oldHeading.id                // Get the Shadow DOM <h2>               this.heading = this.shadowRoot.querySelector('h2')                // If `id` exists, apply it               if (id) {                 this.heading.id = id               }                // If there is no level, there is no heading.               // Add a warning.               if (!level) {                 console.warn('The first element inside each <toggle-section> should be a heading of an appropriate level.')               }                // If the level is a real integer but not 2               // set `aria-level` accordingly               if (level && level !== 2) {                 this.heading.setAttribute('aria-level', level)               }                // Add the Light DOM heading label to the innerHTML of the toggle button               // and remove the now unwanted Light DOM heading               this.btn.innerHTML = oldHeading.textContent + this.btn.innerHTML               oldHeading.parentNode.removeChild(oldHeading)                // The main state switching function               this.switchState = () => {                 let expanded = this.getAttribute('open') === 'true' || false                  // Toggle `aria-expanded`                 this.btn.setAttribute('aria-expanded', expanded)                 // Toggle the `.content` element's visibility                 this.shadowRoot.querySelector('.content').hidden = !expanded               }                this.btn.onclick = () => {                  // Change the component's `open` attribute value on click                 let open = this.getAttribute('open') === 'true' || false                 this.setAttribute('open', open ? 'false' : 'true')                  // Update the hash if the collapsible section's                  // heading has an `id` and we are opening, not closing                 if (this.heading.id && !open) {                   history.pushState(null, null, '#' + this.heading.id)                 }               }             }              connectedCallback() {               if (window.location.hash.substr(1) === this.heading.id) {                 this.setAttribute('open', 'true')                 this.btn.focus()               }              }              // Identify just the `open` attribute as an observed attribute             static get observedAttributes() {               return ['open']             }              // When `open` changes value, execute switchState()             attributeChangedCallback(name) {               if (name === 'open') {                 this.switchState()               }             }           }            // Add our new custom element to the window for use           window.customElements.define('toggle-section', ToggleSection)             // Define the expand/collapse all template           const buttons = document.createElement('div')           buttons.innerHTML = `             <ul class="controls" aria-label="section controls">               <li><button id="expand">expand all</button></li>               <li><button id="collapse">collapse all</button></li>             </ul>             `            // Get the first `toggle-section` on the page           // and all toggle sections as a node list           const first = document.querySelector('toggle-section')           const all = document.querySelectorAll('toggle-section')            // Insert the button controls before the first <toggle-section>           first.parentNode.insertBefore(buttons, first)            // Place the click on the parent <ul>...           buttons.addEventListener('click', (e) => {             // ...then determine which button was the target              let expand = e.target.id === 'expand' ? true : false              // Iterate over the toggle sections to switch             // each one's state uniformly             Array.prototype.forEach.call(all, (t) => {               t.setAttribute('open', expand)             })           })         }       }     })()         </script> 

Chips and Button Sizes

If the minimum tap area if 48x48dp:

https://material.io/design/usability/accessibility.html

Then what is the logic behind chips being 32dp in height:

https://material.io/design/components/chips.html#specs

And buttons being 36dp in height:

https://material.io/design/components/buttons.html#specs

Only button linked or whole item linked?

A site I’m working on has summary panels, with an action button to continue or view more details on that item.

I’d like to make the whole panel clickable not only the button. Are there any negatives to this? Which is preferred?

There are no other actions within the panel nor should there be. I imagine having the whole panel as an action cloud lead to miss clicks or fat fingering on mobile.

enter image description here

The circle in this example is an icon, not a secondary action.

Button bar: criteria and position

Me and my team are (re)thinking some UI details of our main application.

It’s a “traditional” desktop application for the Windows platform. It’s a business targeted application, and our customers are accountants, professionals, lawyers and (overall) their employees.

Currently we have a button bar placed at the bottom of each window. The main problem about it, it’s that sometimes there are too many buttons and there is no way to emphatize the most important actions from the less ones.

So we decided to split the button bar in two, getting the “action buttons” (buttons about actions who “do something with the items”) apart from the “navigation buttons” (buttons which call actions that end closing the window), where:

  • Action buttons are placed on the bottom left of the windows: New Item, Details, Print, Delete
  • Navigation buttons are placed at the very bottom right of the windows: Close, Back

  • Is it a good idea?

  • It would be clear to the final users the criteria?

I have prepared 2 different images:

Updated – loaded on my Dropbox account:

Before:

Before

After:

After

Thank you

Button bar: criteria and position

Me and my team are (re)thinking some UI details of our main application.

It’s a “traditional” desktop application for the Windows platform. It’s a business targeted application, and our customers are accountants, professionals, lawyers and (overall) their employees.

Currently we have a button bar placed at the bottom of each window. The main problem about it, it’s that sometimes there are too many buttons and there is no way to emphatize the most important actions from the less ones.

So we decided to split the button bar in two, getting the “action buttons” (buttons about actions who “do something with the items”) apart from the “navigation buttons” (buttons which call actions that end closing the window), where:

  • Action buttons are placed on the bottom left of the windows: New Item, Details, Print, Delete
  • Navigation buttons are placed at the very bottom right of the windows: Close, Back

  • Is it a good idea?

  • It would be clear to the final users the criteria?

I have prepared 2 different images:

Updated – loaded on my Dropbox account:

Before:

Before

After:

After

Thank you

How do I make it so that dropdown option selection is linked to radio button selection HTML?

I am brand new to web development, and I was learning about linking radio buttons when faced with a ‘choice’ on a web-site, so that you cannot select multiple radio buttons that are related to a single question.

I thought “Is it possible to make is so that you have a drop-down menu that is linked to the radio buttons, so that when you select an option from the menu, the radio buttons cannot be selected?”

Here’s what I did:

enter image description here

As you can see, I can select both the “Dogs” radio button and an option from the selection menu “Other”. At the top of the URL, it says that the name “animalSelect” is equal to both DOGS and Lemur.

How do I make it so that it only picks one or the other?

(This is also my first question, so if anybody has any suggestions for asking questions on the site, do let me know. Thank you.)

Button placement in the footer of card layout?

Should the button be placed on the bottom left corner or bottom right corner in the card layout?

I was referring to Google’s material design I found out that action buttons are placed on the bottom left corner? Is there is any specific reason? Or it can be placed on the bottom right corner as well?

Link: https://material.io/design/components/cards.html#anatomy