[{"id":"f322fea7-4ca5-4b5d-86c1-001912c850b2","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"f7bf5f33-288c-4893-b444-055be654e93a","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"4244ec5a-a6a9-42fc-9651-072233db3cf0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"53155f14-d53e-4d53-a087-0a32d9b088e8","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"d5b83782-724a-4dcd-a518-0ae69944e387","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"7c54099b-4e27-4e88-91eb-0c637639e54d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"20765fbe-aa2d-45e9-b63f-0efcc5225c16","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"17f5bd45-99ce-43d5-b68e-0f5049943703","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"8c11df37-0484-40c2-a9b4-103ead6c8314","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"1c4f2565-d1d8-4ad5-89d3-1980a756bab0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"cccfd524-1150-4583-98f4-1c78277fb19b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"18b5ea90-6de5-4399-90d1-2238cfb3382e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"dac211bb-2f29-4663-8bb3-2359b67c5dc3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"0d811d5c-d17f-4262-96ef-272da4fee248","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"83e0bc87-eb53-4a6c-a354-28ec6433cc9f","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"f3aca57e-9e1e-4242-a235-31898017ee25","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"af280636-785f-4b45-8c31-3433882a446a","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"6308caea-fbe5-4424-b9af-34c24356e951","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"6433ad22-3173-436a-8ff9-355a17142bc5","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"49c3c113-8550-43de-a6c8-35829e88e5e6","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"18eede08-b743-418d-94db-37c2af1dbc30","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"decb7443-11fe-4aa0-8b93-3c200275616a","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"6d98d12d-125b-4741-b4a5-3db1a0f2e301","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"5b251a9f-5a3b-4a44-8408-3fdcf02f3d90","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"e9c38f09-cfd3-4a78-b2cf-412e3c1b5945","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"1e5d6f9f-050e-4b0c-a881-41dd5951c7e5","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9922f417-b683-48c6-bad6-439c91ebf668","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c907e410-0d04-4906-ac6f-452336e8d44f","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"e36475b1-32f5-4b0b-a33b-47e34aa1a708","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"37f2c3b0-6b80-4da3-9d06-481bb204a2b1","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5f15dcdb-9002-46de-9423-4d87ce9e8cb9","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c126327a-cafc-49a4-8d18-4daaa1e9b2b0","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"6f091bb9-87ea-4ff0-9b1b-4f280c1d96c1","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"4ef5fa73-b193-400b-942e-51646095e0f5","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"6eed225d-831a-4ad0-ace7-52c306719b0e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a5cd23f-8c36-47a0-ba1f-565c13d9dc41","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"3e527c36-c9a3-4850-bd83-578097ae97f4","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"2a064357-436f-48b6-9d47-57fafa83ca83","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"f28d747e-a0a9-4967-9940-581cdf4e6a07","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"28d36d47-c582-4210-a848-5ba48491bb80","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"bd4ffbde-fb59-44f0-8166-5de0e2f8dcb3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"538ebc70-b737-4e61-a1a5-5f33e41367f6","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"7fc447a7-c879-424d-832b-603f956c3cb3","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"2e3972d0-8608-4a5c-920d-66734b85033c","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c916ab18-d86f-45ce-b2ac-6aa47581a625","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"40a13a36-7246-4f8b-8ccc-6b5d494fc344","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"13811256-dbe9-48a8-88b9-6ec49b2467ac","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"4d4adcc8-433a-4969-9daa-732be28b5d0d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c3f78991-8a84-451e-8704-7414c1318b9e","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"664d4485-f5e8-49e4-9766-748abe7aeac2","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"3a548f28-610d-42d6-8602-7d982025750f","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"754efafe-744e-452e-9e46-833c9b36c763","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"59774e97-ff52-425e-8b41-8657dcb115ef","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d5f1de25-5097-46ca-8e8c-881e41679af8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"71cfa296-3ff8-4259-acc9-8d89d0268c3f","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"de1c695a-c31f-4884-8215-8eeb468cb36d","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"81fc1b9e-a9e4-41f6-be4f-9043eaa82970","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"8d952ce2-b977-4976-b8cb-91999367d807","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"e742bb05-9f35-412d-bac5-91f0094a7c44","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"bbbef556-1bcd-4fe9-8bd2-93593b315e0b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d3e0049c-437f-4361-b452-97464367f2ca","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"7d2857c8-1f21-4806-ae86-9a33ebef97c5","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"b26b60af-f0f9-4dc7-baba-9cb816e469df","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"7ccb20b2-7e36-4fe8-9c24-9fecc761cc4e","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"b3c7e8d4-8fd1-4c1f-891d-a01f59233ac7","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"9f59a948-51e5-4973-a1f2-a2317e6558b0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fd091a7c-6bb2-40d3-b471-a26eec95cf9e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d5b1f409-61c4-4e5b-838d-a61f619ad369","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c610be2b-7242-4f96-a82d-ace5c6780110","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ef28807f-c72f-4a28-8f05-b5b918225c63","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"473587ec-9bbe-400e-b1ba-be46ff5490c6","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"f3751417-d894-4cf1-8a8c-c2e7391dd4b1","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"b2cc3c1a-3f57-47ac-838c-c60760ca2057","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c5cc96ac-e1f4-442d-8a20-c91d613dfc8e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fcb88fc4-f83c-4c6c-8ef2-c9f726913d66","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"5a29931c-50d2-4535-ace2-cd9e0f04d9b8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"c6a516da-4175-4615-8c69-cde1f1c97471","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"79ba78c3-596e-4c91-84e2-cf209029f9a7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"7c93af39-5091-4a6d-ba35-d63aee420f6d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"97dbcd20-2993-40b6-bd9d-d957fd36c682","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"7f0db861-bec6-4083-a3a1-dc63dc748d4d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"b34be8fb-7180-4d6f-9a82-dca69d533948","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"5e710667-f653-4604-ab4e-e0e5f77b2001","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a2c07f8c-4eb2-452a-b592-e7e868907e46","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"1652b4e6-63f5-4307-9a32-eae723728651","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"4c1940f2-b444-4821-b372-eba9877a246c","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"b4108347-e0ee-4c23-a269-ecf370879fef","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"4c3f9ce0-b19f-4784-985a-edd29b21e713","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"689fe533-2f18-436e-82ff-eefe1b908783","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"08e3a5db-2265-42d4-bd30-efc17de0d028","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"1b402080-435c-43f2-a191-f21385bb8dc7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"e138f0f4-c8c7-49d7-8ea0-f65f8845d8e0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9bab41b8-5227-4c3b-8d40-f9ebae939eeb","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"2872e81a-93c5-4540-bd3b-fe8f172cddf8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]}]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Fill Effects

SpreadJS allows you to add fill effects in shapes in order to enhance their appearance by creating different UI effects.

Solid Fill

You can apply a solid fill to shapes by using ShapeFillType enumeration. It provides solid and none values which create the below fill effects:




The following code example applies solid and no fill to shapes.

// Add a shape with solid fill
var shape1 = activeSheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.diamond, 200, 50, 150, 150);
var style = shape1.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'red'};
shape1.style(style);

// Add a shape with no fill
var shape2 = activeSheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.diamond, 400, 50, 150, 150);
var style = shape2.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.none };
shape2.style(style);

Gradient Fill

You can apply a gradient fill to shapes that provide a 3D color look by creating color blending effects. The start position of every color can be specified in the stops property and the brightness and transparency ratio of colors can be set as well.


SpreadJS provides two types of gradient fills:

  • Linear gradient: Fills the shape defined by the direction or angle. If direction and angle, both are mentioned, direction takes precedence.



  • Radial gradient: Fills the shape defined by the direction of the center point.



The linear or radial values of GradientFillType enumeration can be used to set the type of gradient fill in shapes. The direction of gradients can be set by using LinearGradientFillDirection or RadialGradientFillDirection enumerations.


The following example code applies linear and radial gradient fill to the four shapes as shown in the above image.

// Add linear fill specified by direction
addStyles(sheet.shapes.get('shape1'),
{   type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
    direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
    stops: [{color: 'pink', position: 0}, {color: 'blue', position: 1}]
});

// Add linear fill specified by angle
addStyles(sheet.shapes.get('shape2'),
{   type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
    angle: 60,
    stops: [{color: 'yellow', position: 0, transparency: 0.3},
    {color: 'green', position: 0.5, transparency: 0.5},
    {color: 'blue', position: 1, transparency: 0.8, brightness: 0.2}]
});

// Add radial fill specified by center direction
addStyles(sheet.shapes.get('shape3'),
{   type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
    direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter,
    stops: [{color: 'blue', position: 0}, {color: 'pink', position: 1}]
});

// Add radial fill specified by bottom right direction
addStyles(sheet.shapes.get('shape4'),
{   type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
    direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromBottomRight,
    stops: [{color: 'yellow', position: 0}, {color: 'green', position: 1}]
});

function addStyles(shapeName, fillType) {
    var style = shapeName.style();
    style.fill = fillType;
    shapeName.style(style);
}

Picture Fill

You can add pictures in shapes by setting the image source as a base64 string. The transparency and offset properties (left, right, top, bottom) can also be set by using the fill options of the IShapePictureFillOption interface.




The following example code adds an image in a shape and sets its transparency.

var shapechart = "data:image/png;base64,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";

var GCshape = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 20, 50, 400, 300);

// Picture fill style
var stylePic = GCshape.style();
stylePic.fill = { src: shapechart, transparency: 0.2};
GCshape.style(stylePic);

Texture Fill

You can apply texture fill to shapes by adding a picture as texture in a shape. The tilePictureAsTexture property of the IShapeTextureFillOption interface should be set to true so that the picture behaves as a texture. The transparency, offset, scale, alignment, and mirror type properties can also be set by using the fill options of the IShapeTextureFillOption interface.


texture-fill


The following example code adds a picture as texture in a shape.

var spreadImg = "data:image/png;base64,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";

var GCshape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 450, 50, 450, 300);

// Texture fill style
var styleTexture = GCshape2.style();
styleTexture.fill = { src: spreadImg, tilePictureAsTexture: true, 
                    transparency: 0.7, 
                    scaleX: 0.8, 
                    scaleY: 0.8, 
                    alignment: GC.Spread.Sheets.Shapes.TextureFillAlignment.left
                };
GCshape2.style(styleTexture);

Limitations of Picture and Texture fill

  • SpreadJS only supports adding pictures with base64 format.

  • SVG images must have specified dimensions (width and height), for example:

    <svg width="5cm" height="5cm" />

  • Transparency property is not supported while exporting to PDF.

  • While exporting to Excel, the DPI of the picture should be 96 otherwise, the texture filling effects will be inconsistent.