1"use strict";(globalThis.webpackChunkmy_website||=[]).push([[4718],{51691(e,n,t){t.r(n),t.d(n,{assets:()=>m,contentTitle:()=>c,default:()=>g,frontMatter:()=>h,metadata:()=>o,toc:()=>u});var r=t.cw(function(e,n){const r=t.p+"assets/images/approval-m-inelement-screen-f6879d55a3c091a1b3f78eba3ffc3b9c.png";t.d(n,["A",0,r])}),a=t.cw(function(e,n){const r=t.p+"assets/images/approval-management-before-create-221e7ccfa2c19dd55ef6a1db5b892551.png";t.d(n,["A",0,r])}),i=t.cw(function(e,n){const r=t.p+"assets/images/approval-management-with-setting-0b0557ff7a061fa4bbb67f4d31fbcf1b.png";t.d(n,["A",0,r])}),s=t.cw(function(e,n){const r=t.p+"assets/images/diagram-af588aab29e7d8c9774ca35c2621bd0e.png";t.d(n,["A",0,r])}),l=t.cw(function(e,n){const r=t.p+"assets/images/embed-code-c54ee530d4b502c53cb236dceb83571e.png";t.d(n,["A",0,r])});const o=JSON.parse('{"id":"embeddable-uis/element/approval-management","title":"Approval Management","description":"Embed the Approval Management element so reviewers can approve or deny pending Operation Approval requests.","source":"@site/docs/embeddable-uis/element/approval-management.mdx","sourceDirName":"embeddable-uis/element","slug":"/embeddable-uis/element/approval-management","permalink":"/embeddable-uis/element/approval-management","draft":false,"unlisted":false,"editUrl":"https://github.com/permitio/docs/edit/master/docs/embeddable-uis/element/approval-management.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5,"title":"Approval Management","description":"Embed the Approval Management element so reviewers can approve or deny pending Operation Approval requests."},"sidebar":"integrations","previous":{"title":"Operation Approval","permalink":"/embeddable-uis/element/operation-approval"},"next":{"title":"Permission Levels","permalink":"/embeddable-uis/permission-levels"}}');var d=t(74848),p=t(28453);const h={sidebar_position:5,title:"Approval Management",description:"Embed the Approval Management element so reviewers can approve or deny pending Operation Approval requests."},c=void 0,m={},u=[{value:"How approval management works",id:"overview",level:2},{value:"Prerequisites",id:"prerequisites",level:2},{value:"Create the element",id:"creating-and-connecting-the-element",level:2},{value:"1. Start a new Approval Management element",id:"1-in-the-elements-screen-under-approval-management-click-on-create-element",level:3},{value:"2. Name the element",id:"2-give-the-element-a-name-and-click-on-create",level:3},{value:"Customize the element",id:"element-customization",level:2},{value:"Add the iframe to your application",id:"creating-an-iframe",level:2},{value:"Placeholders in the iframe src",id:"the-dynamic-values-in-src-are",level:3},{value:"Log users in to the element",id:"embedding-the-element",level:2},{value:"Verify the element",id:"verify-the-element",level:2},{value:"Next steps",id:"next-steps",level:2}];function v(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,p.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.p,{children:["Embed the Approval Management element so reviewers can approve or deny operation approval requests inside your application. This page is for developers who add Permit Elements, the embeddable UI components, to an application that already uses the ",(0,d.jsx)(n.a,{href:"/embeddable-uis/element/operation-approval",children:"Operation Approval element"}),"."]}),"\n",(0,d.jsx)("span",{style:{margin:"0 30px"},children:(0,d.jsx)("img",{src:"/img/approval-flows/approval-management/approval-management-preview.png",alt:"Approval Management element listing pending requests with Approve and Deny buttons",style:{width:"70%",border:"1px solid black"}})}),"\n",(0,d.jsx)(n.h2,{id:"overview",children:"How approval management works"}),"\n",(0,d.jsx)(n.p,{children:"The Approval Management element lists the requests that users submit through an Operation Approval element."}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsxs)(n.li,{children:["When you create an Operation Approval element, Permit creates two roles on its resource: ",(0,d.jsx)(n.code,{children:"_Reviewer_"})," and ",(0,d.jsx)(n.code,{children:"_Approved_"}),"."]}),"\n",(0,d.jsxs)(n.li,{children:["Users who hold the ",(0,d.jsx)(n.code,{children:"_Reviewer_"})," role on a request's resource instance see that request in the Approval Management element."]}),"\n",(0,d.jsx)(n.li,{children:"A reviewer approves or denies the request."}),"\n",(0,d.jsxs)(n.li,{children:["When a reviewer approves a request, Permit assigns the requesting user the ",(0,d.jsx)(n.code,{children:"_Approved_"})," role on the request's resource instance."]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"For example, an employee in the marketing department wants to transfer money to an advertising supplier. The employee can't make the transfer without approval, so the employee requests it through the Operation Approval element. The marketing manager approves the transfer in the Approval Management element."}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"Operation approval flow: an employee requests approval for a bank transfer, a reviewer approves or denies the request in the Approval Management element",src:s().A+"",width:"1771",height:"762"})}),"\n",(0,d.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["An ",(0,d.jsx)(n.a,{href:"/embeddable-uis/element/operation-approval",children:"Operation Approval element"}),", with reviewers assigned to its requests."]}),"\n",(0,d.jsxs)(n.li,{children:["JWKS or a backend login route set up for element login. See ",(0,d.jsx)(n.a,{href:"/embeddable-uis/embedding-elements",children:"Embed Permit Elements"}),"."]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"creating-and-connecting-the-element",children:"Create the element"}),"\n",(0,d.jsx)(n.h3,{id:"1-in-the-elements-screen-under-approval-management-click-on-create-element",children:"1. Start a new Approval Management element"}),"\n",(0,d.jsxs)(n.p,{children:["In the ",(0,d.jsx)(n.a,{href:"https://app.permit.io/elements",children:"Elements"})," screen, under ",(0,d.jsx)(n.strong,{children:"Approval Management"}),", click ",(0,d.jsx)(n.strong,{children:"Create Element"}),"."]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"Elements screen with the Create Element button under Approval Management",src:r().A+"",width:"643",height:"415"})}),"\n",(0,d.jsx)(n.h3,{id:"2-give-the-element-a-name-and-click-on-create",children:"2. Name the element"}),"\n",(0,d.jsxs)(n.p,{children:["Enter a name for the element, and click ",(0,d.jsx)(n.strong,{children:"Create"}),"."]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"Approval Management element form before creation",src:a().A+"",width:"1498",height:"893"})}),"\n",(0,d.jsx)(n.h2,{id:"element-customization",children:"Customize the element"}),"\n",(0,d.jsx)(n.p,{children:"In the element form, you can:"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:"Change the background color and the button colors"}),"\n",(0,d.jsx)(n.li,{children:"Show or hide the requesting user's email, the request reason, and the request date and time"}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"Approval Management element form with color and display settings",src:i().A+"",width:"1490",height:"875"})}),"\n",(0,d.jsx)(n.h2,{id:"creating-an-iframe",children:"Add the iframe to your application"}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsxs)(n.p,{children:["Open the Approval Management element, and click ",(0,d.jsx)(n.strong,{children:"Generate Code"})," at the top of the screen."]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.img,{alt:"Approval Management element page with the Generate Code button",src:l().A+"",width:"1105",height:"725"})}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsx)(n.p,{children:"Copy the iframe snippet, and paste it into the page where reviewers work."}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["\n",(0,d.jsxs)(n.p,{children:["Replace the placeholders in ",(0,d.jsx)(n.code,{children:"src"})," with your values."]}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.h3,{id:"the-dynamic-values-in-src-are",children:"Placeholders in the iframe src"}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"Placeholder"}),(0,d.jsx)(n.th,{children:"Value"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"<ELEMENT_NAME>"})}),(0,d.jsx)(n.td,{children:"The name of the element you created."})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"<SOME_UNIQUE_ID>"})}),(0,d.jsx)(n.td,{children:"The ID of your environment."})]})]})]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-html",children:'<iframe\n\ttitle="Permit Element Name"\n\tsrc="https://embed.permit.io/<ELEMENT_NAME>?envId=<SOME_UNIQUE_ID>&darkMode=false"\n\twidth="100%"\n\theight="100%"\n\tstyle="border: none;"\n/>\n'})}),"\n",(0,d.jsxs)(n.p,{children:["This example has no ",(0,d.jsx)(n.code,{children:"tenantKey"})," parameter. If the snippet that ",(0,d.jsx)(n.strong,{children:"Generate Code"})," produces includes ",(0,d.jsx)(n.code,{children:"tenantKey"}),", set it to the key of the tenant the element applies to."]}),"\n",(0,d.jsx)(n.h2,{id:"embedding-the-element",children:"Log users in to the element"}),"\n",(0,d.jsxs)(n.p,{children:["Before the iframe loads, log the reviewer in to Permit Elements with ",(0,d.jsx)(n.code,{children:"permit.elements.login()"}),". For the steps, see ",(0,d.jsx)(n.a,{href:"/embeddable-uis/embedding-elements",children:"Embed Permit Elements"}),". For all login methods, see ",(0,d.jsx)(n.a,{href:"/embeddable-uis/element-login",children:"Log users in to Permit Elements"}),"."]}),"\n",(0,d.jsx)("div",{className:"video-container",children:(0,d.jsx)("iframe",{src:"https://www.youtube.com/embed/xGYdDF65lkQ",title:"Permit Elements video",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}),"\n",(0,d.jsx)(n.h2,{id:"verify-the-element",children:"Verify the element"}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsx)(n.li,{children:"Submit a request through the Operation Approval element, and assign a reviewer to the request's resource instance."}),"\n",(0,d.jsx)(n.li,{children:"Sign in to your application as the reviewer, and open the page with the Approval Management element. The request appears in the list."}),"\n",(0,d.jsxs)(n.li,{children:["Click ",(0,d.jsx)(n.strong,{children:"Approve"}),". In the Permit dashboard, open ",(0,d.jsx)(n.strong,{children:"Directory"}),". The requesting user has the ",(0,d.jsx)(n.code,{children:"_Approved_"})," role on the resource instance."]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.a,{href:"/api/elements/operation_approval",children:"Operation Approval API"}),": review operation approvals from your own interface."]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.a,{href:"/embeddable-uis/webhooks#operation-approval-webhook",children:"Configure webhooks"}),": get notified when a request is approved or denied."]}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,p.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(v,{...e})}):v(e)}},28453(e,n,t){t.d(n,{R:()=>s,x:()=>l});var r=t(96540);const a={},i=r.createContext(a);function s(e){const n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.