{"id":4678,"date":"2026-02-24T09:57:11","date_gmt":"2026-02-24T15:57:11","guid":{"rendered":"https:\/\/racmanuel.dev\/?post_type=docs&#038;p=4678"},"modified":"2026-02-24T09:57:23","modified_gmt":"2026-02-24T15:57:23","password":"","slug":"code-scan","status":"publish","type":"docs","link":"https:\/\/racmanuel.dev\/en\/docs\/custom-fields-booster\/code-scan\/","title":{"rendered":"Code Scan"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Scans QR codes or barcodes using the device camera and stores the scanned value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The field also supports manual input in a single-line text field.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use-cases\">Use Cases<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Capture product barcodes in the editor<\/li>\n\n\n\n<li>Scan QR codes for asset tracking<\/li>\n\n\n\n<li>Store serial numbers from labels<\/li>\n\n\n\n<li>Quick entry of inventory IDs<\/li>\n\n\n\n<li>Validate labels during content entry<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"field-preview\">Field Preview<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A text input with Scan and Clear buttons, plus a modal scanner UI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use\">How to Use<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add the Code Scan field to a Field Group.<\/li>\n\n\n\n<li>Set a placeholder if needed.<\/li>\n\n\n\n<li>Configure <strong>FPS<\/strong> and <strong>QR Box<\/strong> size.<\/li>\n\n\n\n<li>Enable <strong>Auto close after scan<\/strong> if desired.<\/li>\n\n\n\n<li>Enable <strong>Remember last camera<\/strong> if desired.<\/li>\n\n\n\n<li>Choose <strong>Trim value<\/strong> and <strong>Uppercase<\/strong> behavior.<\/li>\n\n\n\n<li>Save the Field Group and use Scan in the editor.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"field-settings\">Field Settings<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Setting<\/th><th>Description<\/th><th>Default<\/th><\/tr><tr><td>Placeholder<\/td><td>Text shown when field is empty<\/td><td>Scan result will appear here\u2026<\/td><\/tr><tr><td>FPS<\/td><td>Frames per second for scanning<\/td><td>10<\/td><\/tr><tr><td>QR Box<\/td><td>Size (px) of the scanning box<\/td><td>250<\/td><\/tr><tr><td>Auto close after scan<\/td><td>Close the scanner modal after a successful scan<\/td><td>1<\/td><\/tr><tr><td>Remember last camera<\/td><td>Store last used camera in localStorage<\/td><td>1<\/td><\/tr><tr><td>Trim value<\/td><td>Trim whitespace from scanned value<\/td><td>1<\/td><\/tr><tr><td>Uppercase<\/td><td>Convert scanned value to uppercase<\/td><td>0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"value-storage\">Value &amp; Storage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Saved as: Post meta<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Storage type: String<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Return format: string<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">REST format: not specified<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Important details:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Optional trimming and uppercasing are applied before saving.<\/li>\n\n\n\n<li>Value is sanitized with <code>sanitize_text_field()<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"output-examples\">Output Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"php\">PHP<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$value = get_field('my_code_scan');\n\nif (is_string($value) &amp;&amp; $value !== '') {\n    echo esc_html($value);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"twig\">Twig<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">{% set value = fn('get_field', 'my_code_scan') %}\n{% if value %}\n  {{ value|e }}\n{% endif %}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"compatibility\">Compatibility<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repeaters<\/li>\n\n\n\n<li>Flexible Content<\/li>\n\n\n\n<li>Options Pages<\/li>\n\n\n\n<li>Frontend forms (acf_form)<\/li>\n\n\n\n<li>REST API<\/li>\n\n\n\n<li>Multisite<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hooks-developer\">Hooks (Developer)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hooks-summary\">Hooks Summary<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Hook<\/th><th>Type<\/th><th>Purpose<\/th><\/tr><tr><td>custom_fields_booster_code_scan_defaults<\/td><td>Filter<\/td><td>Modify default settings.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_supports<\/td><td>Filter<\/td><td>Modify ACF support flags.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_before_render<\/td><td>Action<\/td><td>Run logic before rendering UI.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_after_render<\/td><td>Action<\/td><td>Run logic after rendering UI.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_instance_id<\/td><td>Filter<\/td><td>Modify instance id.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_input_atts<\/td><td>Filter<\/td><td>Modify input attributes.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_before_settings<\/td><td>Action<\/td><td>Run logic before rendering settings UI.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_after_settings<\/td><td>Action<\/td><td>Run logic after rendering settings UI.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_before_enqueue<\/td><td>Action<\/td><td>Run logic before enqueuing assets.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_after_enqueue<\/td><td>Action<\/td><td>Run logic after enqueuing assets.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_load_value<\/td><td>Filter<\/td><td>Modify value after loading.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_validate_value<\/td><td>Filter<\/td><td>Modify validation result.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_update_value<\/td><td>Filter<\/td><td>Modify value before saving.<\/td><\/tr><tr><td>custom_fields_booster_code_scan_format_value<\/td><td>Filter<\/td><td>Modify value returned by <code>get_field()<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"filters\">Filters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Filter:<\/strong> <code>custom_fields_booster_code_scan_input_atts<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Purpose: Modify input HTML attributes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When: You need to add data attributes for custom JS.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_filter('custom_fields_booster_code_scan_input_atts', function ($atts, $field, $field_instance) {\n    $atts['data-custom'] = '1';\n    return $atts;\n}, 10, 3);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"actions\">Actions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Action:<\/strong> <code>custom_fields_booster_code_scan_before_render<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Runs before rendering the field UI.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_action('custom_fields_booster_code_scan_before_render', function ($field, $field_instance) {\n    \/\/ Pre-render logic.\n}, 10, 2);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"assets\">Assets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This field enqueues assets whenever the input is rendered (admin and frontend via <code>acf_form()<\/code>):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>admin\/js\/libs\/html5-qrcode.min.js<\/code><\/li>\n\n\n\n<li><code>admin\/js\/cfb-field-code-scan.js<\/code><\/li>\n\n\n\n<li><code>admin\/css\/cfb-field-code-scan.css<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rest-api\">REST API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Schema: not specified<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rest-validation\">REST Validation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Validation uses <code>validate_value()<\/code> on REST writes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"security-escaping\">Security &amp; Escaping<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Saved value is sanitized with <code>sanitize_text_field()<\/code>.<\/li>\n\n\n\n<li>Optional trimming and uppercasing are applied before saving.<\/li>\n\n\n\n<li>Field HTML output escapes all attributes and UI labels.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"notes-limitations\">Notes \/ Limitations<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scanner UI depends on camera access and the bundled <code>html5-qrcode<\/code> library.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"changelog\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.0.0 \u2014 Initial release<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Scans QR codes or barcodes using the device camera and stores the scanned value. The field also supports manual input in a single-line text field. Use Cases Field Preview A text input with Scan and Clear buttons, plus a modal scanner UI. How to Use Field Settings Setting Description Default Placeholder Text shown when field [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_gspb_post_css":"","_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"doc_category":[96],"doc_tag":[102],"class_list":["post-4678","docs","type-docs","status-publish","hentry","doc_category-custom-fields-booster","doc_tag-free"],"blocksy_meta":[],"year_month":"2026-06","word_count":569,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"racmanuel","author_nicename":"ra_cm","author_url":"https:\/\/racmanuel.dev\/en\/author\/ra_cm\/"},"doc_category_info":[{"term_name":"Custom Fields Booster","term_url":"https:\/\/racmanuel.dev\/en\/docs\/category\/custom-fields-booster\/"}],"doc_tag_info":[{"term_name":"Free","term_url":"https:\/\/racmanuel.dev\/en\/docs\/tag\/free\/"}],"acf":[],"_links":{"self":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/docs\/4678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/comments?post=4678"}],"version-history":[{"count":1,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/docs\/4678\/revisions"}],"predecessor-version":[{"id":4679,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/docs\/4678\/revisions\/4679"}],"wp:attachment":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/media?parent=4678"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/doc_category?post=4678"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/doc_tag?post=4678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}