{"id":35276,"date":"2023-08-17T07:21:08","date_gmt":"2023-08-17T14:21:08","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35276"},"modified":"2023-08-17T07:22:59","modified_gmt":"2023-08-17T14:22:59","slug":"parsing-props-for-merge-controls","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/","title":{"rendered":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls-1024x512.png\" alt=\"Parsing Props for UXPin Merge Controls\" class=\"wp-image-35277\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Our friend from PayPal, Anthony Hand, decided to share how to make designers&#8217; lives easier using parsing props with UXPin Merge.&nbsp;<\/p>\n\n\n\n<p>Merge is UXPin\u2019s revolutionary technology that helps you import and sync your dev\u2019s UI components from the component library in the design tool.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"199\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/AnthonyHand.png\" alt=\"AnthonyHand\" class=\"wp-image-35292\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/AnthonyHand.png 199w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/AnthonyHand-120x120.png 120w\" sizes=\"auto, (max-width: 199px) 100vw, 199px\" \/><\/figure>\n\n\n\n<p>You can bring the components via <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook integration<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Git repository<\/a>. You can also use <a href=\"https:\/\/uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noreferrer noopener\">NPM integration<\/a> for importing and components without engineer\u2019s help. Either way, you don\u2019t need to worry about trading off between time and robust prototypes \u2013 you can have both.<\/p>\n\n\n\n<p>It\u2019s possible to design fully interactive prototypes extremely fast because the UI elements you use during the design process are live code. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover more about UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prop-parsers-for-uxpin-merge-controls\">Prop Parsers for UXPin Merge Controls<\/h2>\n\n\n\n<p>As any UI developer knows, parsing and validating user inputs is as much of an art as a science. While <strong>most<\/strong> of the users <strong>most<\/strong> of the time may enter the expected values, we must always be prepared to do a little graceful massaging and tweaking, as well as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-error\/\" target=\"_blank\" rel=\"noreferrer noopener\">error handling<\/a>.\u00a0<\/p>\n\n\n\n<p>In my days as a Sr. UX Designer on a DevOps team at PayPal and all of my projects are internal web-based tools, we used UXPin Merge. After we settled on the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-fluent-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Fluent UI library<\/a> for our next generation of web apps, we embarked on the process of importing the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI library into UXPin using their Merge technology<\/a>. The process was straightforward enough, though it did have a little learning curve.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git.png\" alt=\"uxpin merge react sync library git\" class=\"wp-image-35211\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/uxpin-merge-react-sync-library-git-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\"><br><\/figcaption><\/figure>\n\n\n\n<p>One of our first learnings with UXPin Merge was that standard parsing and validation needs applied. The Properties Panel in UXPin is, after all, just a fancy user input form. We developed a few standard parsing utilities for basic user inputs like colors and dates, for example.<\/p>\n\n\n\n<p>As we got deeper into the UXPin Merge preparation, we soon realized that more complex UI controls would need complex JSON in the underlying control. However, surfacing raw JSON to non-technical people in UXPin would quickly kill user adoption.<\/p>\n\n\n\n<p>JSON is a complex data model expressed as a string, created for computers, not humans. As a result, one of our most important innovations was to create an <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/UXPinParser.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>advanced multi-use parser<\/strong><\/a> that allowed us to gather plain text user inputs to configure complex UI controls like dropdowns, navigation lists, and data tables.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-basic-parsing\">Basic Parsing<\/h2>\n\n\n\n<p>We created a few basic parser functions in JavaScript to handle the validation for common user inputs around <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/uxpcolorutils.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>colors<\/strong><\/a><strong>,<\/strong> <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/uxpdatetimeutils.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>dates<\/strong><\/a>, and <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/uxpnumberparser.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>numbers<\/strong><\/a>, for example. Although these were primarily created to make it easier to configure UI controls in UXPin, some of these utilities have found wider use internally.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/q0ImVDPJSQZiCsuSJvE0AvNf042L6LErao1SHTlF1y1y13b3oJT5WlamUw7Gg-n4LFomEqSIp7zf4t6NeCDgZQlDXd_u2yAk7M3HyYPdetH8g2OUqN-YC4Rps6hwyzIMkysAJIrUlywzNLECIQ\" width=\"378\" height=\"121\"><\/h3>\n\n\n\n<p><em>Parsers converted the string \u201c50\u201d to an integer and validated the hex color, adding back in the required # mark. Our Merge wrapper also trimmed leading and trailing whitespace from the icon name. (UXPin Editor and Props Panel view)<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color-parsing-formatting\">Color Parsing &amp; Formatting<\/h3>\n\n\n\n<p>The Microsoft Fluent UI controls want hex values, such as \u201c#0078d4\u201d (a lovely shade of blue), but <strong><em>we<\/em><\/strong> wanted to allow users to use both <strong>hex values<\/strong> and easier to remember <strong>theme tokens<\/strong> (such as \u201cthemePrimary\u201d). Plus, we wanted to support <strong>semantic tokens<\/strong> (e.g., \u201csuccess\u201d) and a handful of <strong>basic colors<\/strong> (e.g., \u201cwhite\u201d, \u201ctransparent\u201d).<\/p>\n\n\n\n<p>As for gracefully handling errors, we trimmed input text of whitespace and accepted valid hex values, even if they didn\u2019t start with a # mark.<\/p>\n\n\n\n<p>Our custom <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/uxpcolorutils.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">color parser<\/a> gives a huge range of freedom to users and accepts all of those types of values, returning either a validated hex value for use by the UI control, or \u201cundefined\u201d as an error flag.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/mwEFq2ifpQrSM-JmNE7OkbTu2i2NkDOXip8UI_SoDoxnsEWlXXqQlpmSKIpFzS6noJ4Sc9X9y7dcQ0dPPlp-vF_8wEcRT7HpWfaNifYHvyB3GEke3UmGEBuzoOGRYof7xYdJ6IYjkPQXhhWuoQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>The color parser checked to see whether \u201cthemePrimary\u201d was a color token in the theme, then retrieved its hex value for use by the icon object.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/LVIt6DvzKA7vWIEY0Cu4yW5aNyoHtSYnQJ5teZ5KsagzAu_XVk9ra5R36zXX_8FZ6zXlk_MtWFz61Bzz8SQBvM0YY6GTLimhqEr2L7IVaXOFr5sx3p434-pGLE61Uej9iUqVK2d9ZJvF3-L2JA\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>Similarly, the color parser looked up the special semantic color token, \u201csuccess,\u201d and converted it to a hex, as well. \u201cSuccess\u201d is easier to remember than an arbitrary hex value.&nbsp;<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-complex-parsing\">Complex Parsing<\/h2>\n\n\n\n<p>As mentioned previously, many of the underlying UI controls use complex JSON for configurations, like menus, navs, and dropdowns. However, JSON is hard to read for humans, and easy to break. So instead of JSON, we invented an <strong>innovative syntax <\/strong>that\u2019s much easier for regular humans to use. In addition to plain text, the <strong>syntax tokens<\/strong> we developed include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>icon(Icon_Name | color): Any icon in Microsoft\u2019s <a href=\"https:\/\/developer.microsoft.com\/en-us\/fluentui#\/styles\/web\/icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">icon library<\/a><\/li>\n\n\n\n<li>link(Display Text | URL)<\/li>\n\n\n\n<li>Divider or &#8212;-: To display a divider in a list<\/li>\n\n\n\n<li>* : To mark a child in a section, like in a nav or menu<\/li>\n\n\n\n<li>CSV Parsing: For table rows or when commas are needed in plain text in certain controls<\/li>\n<\/ul>\n\n\n\n<p><strong><em>Note:<\/em><\/strong> In most cases, this special syntax is <strong><em>only<\/em><\/strong> for use within UXPin to help designers and (typically) non-technical people easily build prototypes. To build the actual web apps, developers would set up these UI controls in the standard way with JSON, event handling, etc.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-icons-text-in-menus\">Icons &amp; Text in Menus<\/h3>\n\n\n\n<p>Let\u2019s look at how a user would add popup menu items to a CommandButton control in UXPin. In this example, the user clicks on the button with the text \u201cNew\u201d to display a popup list of the types of objects the user could add, such as various file types, a folder, a user, etc.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/7QKKH6lgU0x-bZnOkUCRZ7-xo1q1EOslK81Y3ZzCaAVRa-gHm4-MRMfRZ3CHds3L3S_Y-c6Bf21csQoXMlR9-tCjWBggEPuVoZYRpUnqbUIX4WZTQB78FYVGyKNzsgZYqQCdvWUjOmIT-IyWPw\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><em>In the UXPin Editor, the user clicks on the <\/em><strong><em>Menu Items<\/em><\/strong><em> prop to view a large text editor. Our improved parser now looks ahead to determine whether a string like \u201cFile\u201d is a regular menu item or a section heading. The <\/em><strong><em>star ( * )<\/em><\/strong><em> indicates that \u201cDocument\u201d is a child, so \u201cFile\u201d must be a <\/em><strong><em>section heading<\/em><\/strong><em>. Note the usage of the <\/em><strong><em>icon() token<\/em><\/strong><em>, and two intuitive ways to indicate a <\/em><strong><em>divider<\/em><\/strong><em>.&nbsp;<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-5to3Z7ybz7FQvhSU-8QLK3jTz1mG0IA03V8wwywlBQ_FiLT6HBKfzJz-Fo6CE_LGC2DQyGs1FdiIlDEAOXfd_G7sYqM1piB25rvMORnQv1MvK71HfmgibZJBuVHKTf4BdGL5xoljuKBs_-5iA\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>This is the view of the same CommandButton as rendered in the UXPin Prototype Preview mode.&nbsp;<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This powerful, innovative syntax was reused across nearly a dozen other UI controls that supported a list-style view: Dropdown, Combobox, Pivot (tab strip), Nav, ChoiceGroup (radio buttons), GroupButton, SplitButton, Breadcrumb, and more.&nbsp;<\/p>\n\n\n\n<p>Although support for icons, dividers and groups varied between controls, once UXPin users became familiar with this basic approach, they are able to easily apply the same approach across a ton of controls to create rich, interactive prototypes without knowing a lick of JSON.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-data-tables\">Data Tables<\/h3>\n\n\n\n<p>As you might imagine, internal web apps are data intensive and data tables are extremely common. So, one of the main drivers for developing this <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/blob\/master\/src\/components\/_helpers\/UXPinParser.js\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">advanced parsing engine<\/a> was to help us easily create realistic &#8212; and modestly functional &#8212; data tables in our prototypes.\u00a0<\/p>\n\n\n\n<p>To create rich prototypes with reasonably advanced functionality, our workflow starts off with Excel. We first develop a model of the view in Excel, using the link() and icon() syntax mentioned above within each cell. Then we export that worksheet as a CSV file.<\/p>\n\n\n\n<p>Using any text editor, we can open the CSV file and copy just the headers, or the row data, into the Headers and Rows props in UXPin, respectively. Compare this streamlined workflow to what we used to do to create tables in other prototyping tools!<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/CoT-G90qyh3cmK2ZengGfBVHFWQ7kH3-4s9FA1YSSEfoh_L8q2Asp-hipyLv_QtEtw1wjsOj6WgqEdOJIFATqs95atRcpMmnWSvJxht_9Aa3p57CLJC8TsLOt-sP6egavzY3iZAj21r7eMx7VQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><em>The UXPin Editor view for the DetailsList\u2019s Rows prop showing the comma-delimited cells (CSV format) with our innovative <\/em><strong><em>link()<\/em><\/strong><em> and <\/em><strong><em>icon()<\/em><\/strong><em> syntax.&nbsp;<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-designer-s-perspective-on-parsing\">Designer\u2019s Perspective on Parsing&nbsp;<\/h2>\n\n\n\n<p>As you look through the source code for <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/tree\/master\/src\/components\/_helpers\" target=\"_blank\" rel=\"noreferrer noopener\">our parsers<\/a>, you may have some opinions on some of the design decisions in the code, and how (relatively) inefficient or verbose the code is. You may even notice some errors. I accept responsibility for these decisions.<\/p>\n\n\n\n<p>Keep in mind that I\u2019m a UX designer, not a professional programmer. More importantly, I explicitly decided to optimize for readability, modularity and ease of maintenance over efficiency, per se, given my limited knowledge of JavaScript. This is open source code, so you\u2019re welcome to borrow some or all of the code, make modifications, or offer updates and bug fixes.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-on-optimizing-uxpin-merge\">On Optimizing UXPin Merge<\/h2>\n\n\n\n<p>UXPin\u2019s Merge technology lets any company import the exact same UI component library that they use for development into UXPin so that anyone on the team can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">create rich, interactive prototypes<\/a>. It\u2019s a powerful technology that can dramatically increase the velocity of design for user feedback and stakeholder reviews, and can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">improve developer handoff<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/logo-uxpin-merge.png\" alt=\"logo uxpin merge\" class=\"wp-image-35283\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/logo-uxpin-merge.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/logo-uxpin-merge-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>However, as our team learned, there needs to be a modest investment in setting up the end user experience for success in UXPin. We made an explicit decision to optimize the UXPin user experience with smart parsing that brings maximum power while minimizing errors.<\/p>\n\n\n\n<p>We recently ported our proprietary Microsoft Fluent UI library to an <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">open source library<\/a> which your team are welcome to experiment with and gain inspiration from. And feel free to liberally modify and\/or borrow <a href=\"https:\/\/github.com\/uxpin-merge\/fluent-ui-uxpin-merge\/tree\/master\/src\/components\/_helpers\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">any of our parsers<\/a> for your own UXPin Merge projects!<\/p>\n\n\n\n<div class=\"wp-block-buttons\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our friend from PayPal, Anthony Hand, decided to share how to make designers&#8217; lives easier using parsing props with UXPin Merge.&nbsp; Merge is UXPin\u2019s revolutionary technology that helps you import and sync your dev\u2019s UI components from the component library in the design tool. You can bring the components via Storybook integration or Git repository.<\/p>\n","protected":false},"author":217,"featured_media":35277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,441,440,11],"tags":[],"class_list":["post-35276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-front-end","category-merge","category-tutorials"],"yoast_title":"","yoast_metadesc":"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Parsing Props for UXPin Merge Controls \u2013 A How-to Guide | UXPin<\/title>\n<meta name=\"description\" content=\"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide\" \/>\n<meta property=\"og:description\" content=\"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-17T14:21:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:22:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anthony Hand\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Hand\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/\"},\"author\":{\"name\":\"Anthony Hand\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/d457121c6570e2c3ba520f48666524b6\"},\"headline\":\"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide\",\"datePublished\":\"2023-08-17T14:21:08+00:00\",\"dateModified\":\"2023-08-17T14:22:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/\"},\"wordCount\":1478,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Parsing-Props-for-UXPin-Merge-Controls.png\",\"articleSection\":[\"Blog\",\"Front-End\",\"Merge by UXPin\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/\",\"name\":\"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Parsing-Props-for-UXPin-Merge-Controls.png\",\"datePublished\":\"2023-08-17T14:21:08+00:00\",\"dateModified\":\"2023-08-17T14:22:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/d457121c6570e2c3ba520f48666524b6\"},\"description\":\"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Parsing-Props-for-UXPin-Merge-Controls.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/Parsing-Props-for-UXPin-Merge-Controls.png\",\"width\":1200,\"height\":600,\"caption\":\"Parsing Props for UXPin Merge Controls\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/parsing-props-for-merge-controls\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/d457121c6570e2c3ba520f48666524b6\",\"name\":\"Anthony Hand\",\"description\":\"Anthony Hand is a user experience designer at PayPal working on innovative \\\"DevOps\\\" apps and services intended for improving internal developer productivity. Since Anthony graduated from the Univ. of Michigan with a Master's degree in Human-Computer Interaction, he has had the opportunity to work on a wide variety of user experiences for all of the major smartphone platforms, multiple desktop and web apps, and even a couple of automotive apps. In his free time, Anthony is working on a new open source port of the Microsoft Fluent UI library to UXPin, and enjoys local theater and spending time with friends over glasses of red wine.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/anthony-hand\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide | UXPin","description":"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/","og_locale":"en_US","og_type":"article","og_title":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide","og_description":"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-17T14:21:08+00:00","article_modified_time":"2023-08-17T14:22:59+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png","type":"image\/png"}],"author":"Anthony Hand","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anthony Hand","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/"},"author":{"name":"Anthony Hand","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/d457121c6570e2c3ba520f48666524b6"},"headline":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide","datePublished":"2023-08-17T14:21:08+00:00","dateModified":"2023-08-17T14:22:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/"},"wordCount":1478,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png","articleSection":["Blog","Front-End","Merge by UXPin","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/","name":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png","datePublished":"2023-08-17T14:21:08+00:00","dateModified":"2023-08-17T14:22:59+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/d457121c6570e2c3ba520f48666524b6"},"description":"Read a guest post by Anthony Hand about parsing props for UXPin Merge Controls. Get instructions on prop parsers and optimize Merge.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/Parsing-Props-for-UXPin-Merge-Controls.png","width":1200,"height":600,"caption":"Parsing Props for UXPin Merge Controls"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/parsing-props-for-merge-controls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Parsing Props for UXPin Merge Controls \u2013 A How-to Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/d457121c6570e2c3ba520f48666524b6","name":"Anthony Hand","description":"Anthony Hand is a user experience designer at PayPal working on innovative \"DevOps\" apps and services intended for improving internal developer productivity. Since Anthony graduated from the Univ. of Michigan with a Master's degree in Human-Computer Interaction, he has had the opportunity to work on a wide variety of user experiences for all of the major smartphone platforms, multiple desktop and web apps, and even a couple of automotive apps. In his free time, Anthony is working on a new open source port of the Microsoft Fluent UI library to UXPin, and enjoys local theater and spending time with friends over glasses of red wine.","url":"https:\/\/www.uxpin.com\/studio\/author\/anthony-hand\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/217"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=35276"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35276\/revisions"}],"predecessor-version":[{"id":49437,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35276\/revisions\/49437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35277"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}