OCM-QR-Field

Free Custom Component built with Svelte for generating QR Codes; installed as a component and used directly within an OCM Form.

bb-QR.mp4

Data Type "Large Text"

This field stores json data which also contains svg.

{
	"type": "URL",
	"fields": {
		"type": {
			"url": "https://bitmapbytes.com",
		},
	},
	"dataString": "https://bitmapbytes.com",
	"ui": {
		"bgHexColor": "#ffffff",
		"qrHexColor": "#111111",
		"alignmentRadius": 0,
		"moduleRadius": 0,
		"moduleSeperation": 0,
	},
	"svg": "",
}

Download

Open the components folder and there is a zipped "BB-QR-Field.zip" you can upload and install into your OCM Developer Components.

Configure

1. Within OCM goto "Content" > "Asset Types"
2. Drop Data type of "Large Text"
3. In the data types appearance setting select BB-QR-Field.

That's it you can now create QR codes from URLs...

Coming soon...

• Choose Colours background and QR Code
• Add logo
• More types... Currently only URL works.

How to build and deploy.

npm run build

• Once you build a dist folder is generated.
• Rename ocm-qr-field.umd.cjs to ocm-qr-field.umd.js
• Open up the component assets folder and drop this in and replace
• Redeploy to OCM.
• OCM asset View - generate QR display with download option.

OCM Example QR Generator Field Component