SOLVED

SP form header add Logo

%3CLINGO-SUB%20id%3D%22lingo-sub-3220676%22%20slang%3D%22en-US%22%3ESP%20form%20header%20add%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3220676%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F139606%22%20target%3D%22_blank%22%3E%40Don%20Kirkham%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20having%20trouble%20adding%20a%20logo%20to%20my%20form%20header%20with%20Json.%20I%20have%20the%20image%20saved%20to%20my%20SP%20site%20assets%20folder%20as%20a%20png%20file.%20When%20I%20tired%20to%20add%20it%20all%20I%20got%20was%20a%20broken%20image.%20Here%20is%20my%20current%20Json%20and%20I%20would%20like%20to%20add%20the%20logo%20to%20the%20left%20side%20of%20everything.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-borderColor-neutralTertiary%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22width%22%3A%20%2299%25%22%2C%0A%20%20%20%20%20%20%20%20%22border-top-width%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%22border-bottom-width%22%3A%20%221px%22%2C%0A%20%20%20%20%20%20%20%20%22border-left-width%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%22border-right-width%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%22border-style%22%3A%20%22solid%22%2C%0A%20%20%20%20%20%20%20%20%22margin-bottom%22%3A%20%2215px%22%2C%0A%20%20%20%20%20%20%20%20%22background-color%22%3A%20%22RGBA(0%2C95%2C131%2C1)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22align-items%22%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22tagsolid%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontSize-42%20ms-fontWeight-regular%20ms-fontColor-themePrimary%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22Details%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex%22%3A%20%22none%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2240px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22white%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontColor-neutralSecondary%20ms-fontWeight-bold%20ms-fontSize-24%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22left%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%2221px%2012px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22white%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3Dif(%5B%24Title%5D%3D%3D''%2C'New'%2C'Reject%20Tag%20Database%20-%20Tag%20%23'%20%2B%20%5B%24Title%5D)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontColor-neutralSecondary%20ms-fontWeight-bold%20ms-fontSize-24%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%2221px%2012px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22white%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3Dif(%5B%24Quantity%5D%3D%3D''%2C''%2C'Closed%20%3A%20')%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22align-items%22%3A%20%22left%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22%3Dif(%5B%24Quantity%5D%3D%3D''%2C''%2Cif(%5B%24Quantity%5D-(%5B%24QuantityScrap%5D%2B%5B%24QuantityRework%5D%2B%5B%24QuantityRTV%5D%2B%5B%24QuantityReturnedtoUse%5D)%3D%3D0%2C'BoxMultiplySolid'%2C'BoxCheckmarkSolid'))%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontSize-42%20ms-fontWeight-regular%20ms-fontColor-themePrimary%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22Details%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22flex%22%3A%20%22none%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2240px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%3Dif(%5B%24Quantity%5D-(%5B%24QuantityScrap%5D%2B%5B%24QuantityRework%5D%2B%5B%24QuantityRTV%5D%2B%5B%24QuantityReturnedtoUse%5D)%3D%3D0%2C'Red'%2C'Green'%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22ms-fontColor-neutralSecondary%20ms-fontWeight-bold%20ms-fontSize-24%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20%22100%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text-align%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%2221px%2012px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22overflow%22%3A%20%22hidden%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22white%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3Dif(%5B%24PartNumber%5D%3D%3D''%2C''%2C'Part%20Number%20%3A%20'%2B%5B%24PartNumber%5D)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%3Dif(%5B%24Quantity%5D%3D%3D''%2C''%2C'Tag%20Quantity%20%3A%20'%2B%5B%24Quantity%5D)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3221036%22%20slang%3D%22en-US%22%3ERe%3A%20SP%20form%20header%20add%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3221036%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1310219%22%20target%3D%22_blank%22%3E%40SG523%3C%2FA%3E%26nbsp%3BThe%20following%20example%20should%20get%20you%20started.%20Insert%20the%20following%20code%20after%20line%2016%20in%20your%20JSON%20above.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22flex%22%2C%0A%20%20%20%20%20%20%20%20%22box-sizing%22%3A%20%22border-box%22%2C%0A%20%20%20%20%20%20%20%20%22align-items%22%3A%20%22center%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22img%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22src%22%3A%20%22https%3A%2F%2F%3CTENANT%3E.sharepoint.com%2Fsites%2Flf%2Fsiteassets%2Flogo.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%20%22Logo%22%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22flex%22%3A%20%22none%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%220px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20%2280px%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22white%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%3C%2FTENANT%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20just%20adds%20another%20div%20to%20the%20left%20of%20your%20existing%20header%20row%20and%20inserts%20an%20image.%26nbsp%3B%20Change%20line%2012%20to%20reflect%20the%20full%20url%20to%20your%20image.%20Good%20luck!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%22%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EPlease%20click%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-weight%3A%20bold%3B%20font-family%3A%20SegoeUI%3B%20font-size%3A%2012.0pt%3B%20color%3A%20%23333333%3B%20background%3A%20%23F2F2F2%3B%22%3EMark%20as%20Best%20Response%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3B%26amp%3B%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-weight%3A%20bold%3B%20font-family%3A%20SegoeUI%3B%20font-size%3A%2012.0pt%3B%20color%3A%20%23333333%3B%20background%3A%20%23F2F2F2%3B%22%3ELike%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3Bif%20my%20post%20helped%20you%20to%20answer%20or%20resolve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-weight%3A%20bold%3B%20font-family%3A%20SegoeUI%3B%20font-size%3A%2012.0pt%3B%20color%3A%20%23333333%3B%20background%3A%20%23F2F2F2%3B%22%3ELike%3C%2FSPAN%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3221885%22%20slang%3D%22en-US%22%3ERe%3A%20SP%20form%20header%20add%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3221885%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F139606%22%20target%3D%22_blank%22%3E%40Don%20Kirkham%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20is%20close%20but%20it%20still%20gives%20me%20a%20broken%20image%20instead%20of%20the%20logo.%20I%20got%20the%20logo%20from%20address%20right%20from%20the%20address%20bar%20while%20viewing%20the%20full%20image.%20I%20also%20tried%20sharing%20the%20image%20and%20using%20the%20link%20from%20sharing.%20Neither%20worked.%20How%20can%20I%20go%20about%20fixing%20this%20issue%2C%20I%20think%20it%20might%20be%20a%20permissions%20issue%20or%20something%20like%20that%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3222041%22%20slang%3D%22en-US%22%3ERe%3A%20SP%20form%20header%20add%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3222041%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1310219%22%20target%3D%22_blank%22%3E%40SG523%3C%2FA%3E%26nbsp%3BIf%20you%20have%20stored%20the%20image%20in%20same%20site%2C%20you%20can%20use%20the%20relative%20URL%20of%20image%20like%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%22src%22%3A%20%22%3D%40currentWeb%20%2B%20'%2FSiteAssets%2FMyImage.jpg'%22%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EOR%3C%2FSTRONG%3E%20copy%20the%20image%20URL%20as%20shown%20in%20below%20image%20%26amp%3B%20use%20it%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ganeshsanap_0-1646069172114.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F351754i2B54FBADC3A1527A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22ganeshsanap_0-1646069172114.png%22%20alt%3D%22ganeshsanap_0-1646069172114.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

@Don Kirkham 

 

I am having trouble adding a logo to my form header with Json. I have the image saved to my SP site assets folder as a png file. When I tired to add it all I got was a broken image. Here is my current Json without logo and I would like to add the logo to the left side of everything.

 

 

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "15px",
        "background-color": "RGBA(0,95,131,1)"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "tagsolid",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "white"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Title]=='','New','Reject Tag Database - Tag #' + [$Title])"
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "right",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$Quantity]=='','','Closed : ')"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "left"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "=if([$Quantity]=='','',if([$Quantity]-([$QuantityScrap]+[$QuantityRework]+[$QuantityRTV]+[$QuantityReturnedtoUse])==0,'BoxMultiplySolid','BoxCheckmarkSolid'))",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "10px",
                        "height": "40px",
                        "color": "=if([$Quantity]-([$QuantityScrap]+[$QuantityRework]+[$QuantityRTV]+[$QuantityReturnedtoUse])==0,'Red','Green'"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "right",
                "padding": "21px 12px",
                "overflow": "hidden",
                "color": "white"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "=if([$PartNumber]=='','','Part Number : '+[$PartNumber])"
                },
                {
                    "elmType": "div",
                    "txtContent": "=if([$Quantity]=='','','Tag Quantity : '+[$Quantity])"
                }
            ]
        }
    ]
}

 

 

Thanks

4 Replies

@SG523 The following example should get you started. Insert the following code after line 16 in your JSON above.

 

    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "https://<tenant>.sharepoint.com/sites/lf/siteassets/logo.png",
            "title": "Logo"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "10px",
            "height": "80px",
            "color": "white"
          }
        }
      ]
    },

 

This just adds another div to the left of your existing header row and inserts an image.  Change line 12 to reflect the full url to your image. Good luck!

 

Please click Mark as Best Response & Like if my post helped you to answer or resolve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

 

@Don Kirkham 

 

That is close but it still gives me a broken image instead of the logo. I got the logo from address right from the address bar while viewing the full image. I also tried sharing the image and using the link from sharing. Neither worked. How can I go about fixing this issue, I think it might be a permissions issue or something like that?

 

Thanks

best response confirmed by SG523 (Contributor)
Solution

@SG523 If you have stored the image in same site, you can use the relative URL of image like: 

 

"src": "=@currentWeb + '/SiteAssets/MyImage.jpg'"

 

OR copy the image URL as shown in below image & use it: 

ganeshsanap_0-1646069172114.png


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Thank you both so much! This has solved my problem. I used the second method of getting the path to make mine work!