{"id":4564,"date":"2024-04-15T00:10:38","date_gmt":"2024-04-14T16:10:38","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4564"},"modified":"2024-04-15T00:10:38","modified_gmt":"2024-04-14T16:10:38","slug":"overview-of-referral-field","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/overview-of-referral-field\/","title":{"rendered":"Overview of Referral Field"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">The <strong id=\"\">referral field<\/strong> is a Collection field that you can include in a <a href=\"https:\/\/help.webflow.com\/article\/cms-collections\" id=\"\">CMS Collection<\/a>. Rather than utilizing an <a href=\"http:\/\/help.webflow.com\/article\/cms-option-field\" id=\"\">option field<\/a> that restricts you to select from a list of predefined values, the referral field allows you to select from any item in another Collection. Subsequently, you can utilize the information of the referred item in <a href=\"https:\/\/help.webflow.com\/article\/collection-list\" id=\"\">Collection lists<\/a> and <a href=\"https:\/\/help.webflow.com\/article\/collection-pages\" id=\"\">Collection pages<\/a>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1600px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1ae_62e9519508a68bc73f41b7e0_aqsqkxd_tdwpo6hm-gl4zawh13rxvxflbgvv6ulx9v8wjuxdwmpad3j8rbjlxjzscczk9w5k1anbtkzi9hh1gpxfr_7nsnsewsva3zbolssfwkjrvieteoxsjhkzwnhcrufbdvgqtql5juwj-epsbg.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94acf88e862578c19b1ae_62e9519508a68bc73f41b7e0_aqsqkxd_tdwpo6hm-gl4zawh13rxvxflbgvv6ulx9v8wjuxdwmpad3j8rbjlxjzscczk9w5k1anbtkzi9hh1gpxfr_7nsnsewsva3zbolssfwkjrvieteoxsjhkzwnhcrufbdvgqtql5juwj-epsbg\"><\/div>\n<\/figure>\n<p id=\"\">For instance, there might be a text field on a Collection page that is dynamically linked to a Collection named &#8220;Recipes&#8221;. Then, an item in a Collection named &#8220;Authors&#8221; (e.g., an author) can be referred to in the &#8220;Recipes&#8221; Collection using a referral field.<\/p>\n<p id=\"\">In case the author is linked to the &#8220;Recipes&#8221; Collection page through a referral field, and you later update that author\u2019s details, it will automatically update on the Collection page due to the referral field connection.<\/p>\n<p id=\"\">Some common applications of the referral field are:<\/p>\n<ul id=\"\">\n<li id=\"\">A \u201cBlog posts\u201d Collection referring to an \u201cAuthors\u201d Collection<\/li>\n<li id=\"\">A &#8220;Recipes&#8221; Collection linking to an &#8220;Authors&#8221; Collection<\/li>\n<li id=\"\">A &#8220;News articles&#8221; Collection referencing a &#8220;Category&#8221; Collection<\/li>\n<li id=\"\">A &#8220;Lessons&#8221; Collection linking to a &#8220;Courses&#8221; Collection<\/li>\n<\/ul>\n<h6 id=\"\"><strong id=\"\">Attention:<\/strong> To refer to <em id=\"\">multiple<\/em> items in a different Collection (e.g., referring to an author\u2019s name <em id=\"\">and<\/em> biography), employ the multi-referral field.<\/h6>\n<p id=\"\">Throughout this tutorial, you will learn:<\/p>\n<ol id=\"\">\n<li id=\"\">Steps to establish a referral field<\/li>\n<li id=\"\">How to cite items<\/li>\n<li id=\"\">How to utilize the referral field in your site layout<\/li>\n<li id=\"\">How to refine a Collection list utilizing the referral field<\/li>\n<li id=\"\">How to implement conditional visibility using the referral field<\/li>\n<\/ol>\n<h2 id=\"\">Steps for Establishing a Referral Field<\/h2>\n<p id=\"\">You can introduce a referral field to a new or existing Collection. To add a referral field to an existing Collection:<\/p>\n<ol id=\"\">\n<li id=\"\">Position the cursor over the <strong id=\"\">Collection<\/strong> where you want to integrate the referral field<\/li>\n<li id=\"\">Press the settings \u201c<strong id=\"\">cog<\/strong>\u201d icon to reveal the <strong id=\"\">Collection settings<\/strong><\/li>\n<li id=\"\">Tap on <strong id=\"\">Add new field<\/strong> within the <strong id=\"\">Collection fields<\/strong> segment<\/li>\n<li id=\"\">Choose the <strong id=\"\">Referral<\/strong> field type<\/li>\n<li id=\"\">Incorporate a <strong id=\"\">Label<\/strong><\/li>\n<li id=\"\">Include <strong id=\"\">Help text<\/strong>, if desired<\/li>\n<li id=\"\">Pick a Collection to refer to from the <strong id=\"\">Collection<\/strong> dropdown<\/li>\n<li id=\"\">Select \u201c<strong id=\"\">This field is required<\/strong>\u201d if you wish to make the field mandatory<\/li>\n<\/ol>\n<p id=\"\">If you have not yet created a Collection, discover how to append a Collection to your site.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1a6_62e951955b1be56be1fd1341_kopway8srej2mdjfmes1vtnrv-04vkuqyhlsmirsntmvnnbl90bqwbm33dxpq6ecr1mr8by7aj5os6jsjiqzhtvfobr3-6rl_lnhaornuijw6-ltdw7ikeyejbwgr99auryybxf6ow4beu_wxohg5n.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Reference field type is highlighted in the \u201cAdd new field\u201d section of Collection settings.\" title=\"64b94acf88e862578c19b1a6_62e951955b1be56be1fd1341_kopway8srej2mdjfmes1vtnrv-04vkuqyhlsmirsntmvnnbl90bqwbm33dxpq6ecr1mr8by7aj5os6jsjiqzhtvfobr3-6rl_lnhaornuijw6-ltdw7ikeyejbwgr99auryybxf6ow4beu_wxohg5n\"><\/div>\n<\/figure>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1a2_62e95196b50daa243f1ab6b3_glltmikldt-cn3vrwxqdxhb7m4mhznbt7knsszcxcy55xkclbghhnnzwlz0aafplggd18simngh9ngnbfjzjwowl0iphorn9pysfyugvqm94mi_twvx33p197vudxtoa4xvttwwe8cdj2s0rlq5dlu.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"An example Reference field named \u201cAuthor,\u201d which has the Collection set to the example \u201cRecipe Authors\u201d Collection.\" title=\"64b94acf88e862578c19b1a2_62e95196b50daa243f1ab6b3_glltmikldt-cn3vrwxqdxhb7m4mhznbt7knsszcxcy55xkclbghhnnzwlz0aafplggd18simngh9ngnbfjzjwowl0iphorn9pysfyugvqm94mi_twvx33p197vudxtoa4xvttwwe8cdj2s0rlq5dlu\"><\/div>\n<\/figure>\n<blockquote id=\"\"><p><strong id=\"\">Crucial:<\/strong> The number of referral fields per Collection is restricted based on your Site plan. <strong id=\"\">Starter<\/strong>, <strong id=\"\">CMS<\/strong>, and <strong id=\"\">Ecommerce Standard<\/strong> Site plans can accommodate up to <strong id=\"\">5<\/strong> referral fields per Collection. <strong id=\"\">Business<\/strong>, <strong id=\"\">Ecommerce Plus<\/strong>, <strong id=\"\">Ecommerce Advanced<\/strong>, and <strong id=\"\">Enterprise<\/strong> Site plans can have up to <strong id=\"\">10<\/strong> referral fields per Collection. <strong id=\"\">Basic<\/strong> Site plans do not include referral fields. <a href=\"https:\/\/webflow.com\/pricing#site-plans\" id=\"\">Discover more regarding site plans<\/a>.<\/p><\/blockquote>\n<h2 id=\"\">Citing Items<\/h2>\n<p id=\"\">After adding a referral field to a Collection, you can enter that Collection\u2019s Collection items and allocate a value for the field in each Collection item. There, you have the flexibility to select any item from the <em id=\"\">alternate<\/em> Collection you are referring to in the referral field settings.<\/p>\n<h2 id=\"\">Using the Referral Field in Site Design<\/h2>\n<p id=\"\">You can extract data from a referred Collection and include it in a Collection page or a Collection list within your site design. You can establish a connection between a field and an element or a style.<\/p>\n<h3 id=\"\">Establishing Connections<\/h3>\n<p id=\"\">When you integrate any element into a Collection list or onto a Collection page, you can source the content for that element from the fields of a referred Collection.<\/p>\n<p id=\"\">For instance, you can link a recipe\u2019s title in your Recipe Collection to a Heading element, and an author\u2019s name to a text element.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1c3_62e95195b50daa62c61ab59b_eciditkuezz1rt7blqplvvnboy4nyjox6kzw5qse5gtwymmkgrknjlvd2mrbqc9sy9isndzplwonkvbfrvl3rqznixwzyb5qqw312t4brfpo1gvcoeef9mwqn2rukbd2zo5_pukyxhiki99_6gj6v6.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A text element is connected to the Name plain text field in an example referenced \u201cAuthor\u201d Collection.\" title=\"64b94acf88e862578c19b1c3_62e95195b50daa62c61ab59b_eciditkuezz1rt7blqplvvnboy4nyjox6kzw5qse5gtwymmkgrknjlvd2mrbqc9sy9isndzplwonkvbfrvl3rqznixwzyb5qqw312t4brfpo1gvcoeef9mwqn2rukbd2zo5_pukyxhiki99_6gj6v6\"><\/div>\n<\/figure>\n<h3 id=\"\">Establishing design connection<\/h3>\n<p id=\"\">In case a referred Collection possesses a <a href=\"http:\/\/help.webflow.com\/article\/color-field\" id=\"\">color palette<\/a> or an <a href=\"http:\/\/help.webflow.com\/article\/image-field\" id=\"\">image placeholder<\/a> configured on each Collection unit, these aspects can be utilized to customize the background hue, border accent, text hue, or background visual in the design of your website.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1b2_62e95195322fda14c5196b46_unc8ylot0xwikmuq4o3yh3rnnrt2vekpplmgg0vxrsffw68fhdfte2-ktf6hbcytmcsd2mdpq3h2a7avefrmevoehc8s7-7_79gbzkm_txc-_qhcmk9seaqrwkxmvwksw_nrwasq5gtu_sn38l8ylp.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cGet BG Color\u201d setting is checked in Dynamic style settings.\" title=\"64b94acf88e862578c19b1b2_62e95195322fda14c5196b46_unc8ylot0xwikmuq4o3yh3rnnrt2vekpplmgg0vxrsffw68fhdfte2-ktf6hbcytmcsd2mdpq3h2a7avefrmevoehc8s7-7_79gbzkm_txc-_qhcmk9seaqrwkxmvwksw_nrwasq5gtu_sn38l8ylp\"><\/div>\n<\/figure>\n<h2 id=\"\">Sorting a Collection list through the relational field<\/h2>\n<p id=\"\">There exist 3 methods to employ a relational field for sorting Collection lists. In the provided scenarios, we will take advantage of a \u201cRecipes&#8221; Collection linking to an &#8220;Authors&#8221; Collection.<\/p>\n<ul id=\"\">\n<li id=\"\">Arrange as per a specific item in the connected Collection (e.g., display solely the recipes related to a particular author)<\/li>\n<li id=\"\">Sort based on the current page\u2019s reference (e.g., display a compilation of other recipes by the same author as the current page&#8217;s author)<\/li>\n<li id=\"\">Select based on the current page\u2019s reference on the linked Collection page (e.g., on the Authors Collection page, showcase all recipes linked to that author)<\/li>\n<\/ul>\n<blockquote id=\"\"><p><strong id=\"\">Crucial:<\/strong> Sorting by reference fields is solely applicable for Collection lists linked to a Collection containing a relational field.<\/p><\/blockquote>\n<h3 id=\"\">Arranging as per a specific item in the linked Collection<\/h3>\n<p id=\"\">It is viable to organize Collection lists through implementing the relational field. This enables the presentation of specific entities adhering to the selection criteria.<\/p>\n<p id=\"\">An exemplar of this could involve creating a Collection list titled \u201cFeatured recipes.\u201d This list could be <strong id=\"\">sorted<\/strong> so that it refers exclusively to the elements (the recipes) in a \u201cRecipes\u201d Collection having a \u2018featured\u2019 flag enabled.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1b8_62e9519598285a4e866384cf_fo6q7aaqqs_5rmdaqdikjbrxpyjjwye0t7mi6zds3jp0qxhlyxqv92fmpbltkq_uoat-dfdd2brtccfrpvpj8d_6wzebjk1cu0q0fm5opzxlqdyb54p6rt3pdrlsi5da5r64-iyi0kict2_iyofi_d.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A Collection list filter is set to filter Collection items with a \u201cFeatured recipe\u201d toggle set to \u201con.\u201d\" title=\"64b94acf88e862578c19b1b8_62e9519598285a4e866384cf_fo6q7aaqqs_5rmdaqdikjbrxpyjjwye0t7mi6zds3jp0qxhlyxqv92fmpbltkq_uoat-dfdd2brtccfrpvpj8d_6wzebjk1cu0q0fm5opzxlqdyb54p6rt3pdrlsi5da5r64-iyi0kict2_iyofi_d\"><\/div>\n<\/figure>\n<h3 id=\"\">Sort by current page\u2019s reference<\/h3>\n<p id=\"\">You have the ability to incorporate a Collection list to a Collection page and feature solely the entities that share the same reference item as the <em id=\"\">Collection<\/em><em id=\"\">page<\/em>\u2019s referenced item.\u00a0<\/p>\n<p id=\"\">For instance, on a &#8220;Recipes&#8221; Collection page, it is possible to exhibit a list of other recipes attributed to the same author as the author referenced on the current page. This is a prevalent strategy to display \u201cRelated content\u201d sections.\u00a0<\/p>\n<p id=\"\">To achieve this, apply a <strong id=\"\">filter<\/strong> to the current page\u2019s Collection list where the \u201cAuthor\u201d reference field matches the \u201cAuthor of Current Recipe.\u201d<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1aa_62e95195322fda37b3196b60_w0jkw5zkpvsqlzahdlccia5-ghip1h3iljgu3dqnyvkdcel4o-mmsmqbvhgnh_lhdc3wmbscby12lpxg_begvmrnc9n2tuokevuqyxjj8znybhehnn4-uuwjk-ywgmuvb0fmszsisi0qi3r3f8x5li.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A filter is set on a Collection list where the \u201cAuthor\u201d equals the \u201cAuthor of Current Recipe.\u201d\" title=\"64b94acf88e862578c19b1aa_62e95195322fda37b3196b60_w0jkw5zkpvsqlzahdlccia5-ghip1h3iljgu3dqnyvkdcel4o-mmsmqbvhgnh_lhdc3wmbscby12lpxg_begvmrnc9n2tuokevuqyxjj8znybhehnn4-uuwjk-ywgmuvb0fmszsisi0qi3r3f8x5li\"><\/div>\n<\/figure>\n<h3 id=\"\">Sort by current page\u2019s reference on the linked Collection page<\/h3>\n<p id=\"\">Additionally, you can filter a Collection list on the <em id=\"\">linked<\/em> Collection page.\u00a0<\/p>\n<p id=\"\">To illustrate, on your &#8220;Authors&#8221; Collection page, you can present all recipes (from a \u201cRecipes\u201d Collection) referencing that author. Insert a Collection list, link it to the \u201cRecipes&#8221; Collection, and implement a <strong id=\"\">filter<\/strong> where the \u201cAuthor\u201d reference field equals the<strong id=\"\"> \u201c<\/strong>Current Recipe Author.\u201d<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1bf_62e95195d0950e3befd81e84_tmhxzwhx43n3n1ncs-lm8iiogu3fr9kpyfkqfiquxk3j3u63vx56kooidtecsldn1pozzisw_pxpj0uflnlunay-zo8lxi8mbzcmbhm9yei2iz7wrigpxtwwrtmwlusxcxxjqwucaszrydkmz8u-ae.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A filter is set on a Collection list so that the \u201cAuthor\u201d equals the \u201cCurrent Recipe Author.\u201d\" title=\"64b94acf88e862578c19b1bf_62e95195d0950e3befd81e84_tmhxzwhx43n3n1ncs-lm8iiogu3fr9kpyfkqfiquxk3j3u63vx56kooidtecsldn1pozzisw_pxpj0uflnlunay-zo8lxi8mbzcmbhm9yei2iz7wrigpxtwwrtmwlusxcxxjqwucaszrydkmz8u-ae\"><\/div>\n<\/figure>\n<p id=\"\"><a href=\"http:\/\/help.webflow.com\/article\/filtering-collection-lists\" id=\"\">Gain further insights on Collection list filters<\/a>.<\/p>\n<h2 id=\"\">How to configure conditional visibility via the relational field<\/h2>\n<p id=\"\">Conditional visibility can be set to unveil or obscure particular elements in a Collection list or on a Collection page through:<\/p>\n<ul id=\"\">\n<li id=\"\">The relational field itself<\/li>\n<li id=\"\">Any fields from the linked collection<\/li>\n<\/ul>\n<h3 id=\"\">Where is this type of criteria applicable?<\/h3>\n<p id=\"\">This specific criterion can only be established within a Collection list linked to the Collection possessing the relational field <em id=\"\">or<\/em> is on the Collection template page of this Collection.<\/p>\n<p id=\"\">For example, if a Collection named \u201cEvents\u201d features a relational field linked to a Collection named \u201cLocations\u201d, conditions can be added based on the reference field \u201cLocations\u201d or any fields from this linked collection at the following instances:<\/p>\n<ul id=\"\">\n<li id=\"\">Within any Collection list associated with the \u201cEvents\u201d Collection<\/li>\n<li id=\"\">On the \u201cEvents\u201d template page<\/li>\n<\/ul>\n<h3 id=\"\">What types of criteria can be defined?<\/h3>\n<p id=\"\">The following criteria based on the relational field itself can be incorporated:<\/p>\n<ul id=\"\">\n<li id=\"\">When the relational field<strong id=\"\"> Is established<\/strong> or<strong id=\"\"> Is not established<\/strong><\/li>\n<li id=\"\">When the relational field <strong id=\"\">Matches<\/strong> or <strong id=\"\">Contrasts<\/strong> a specific value<\/li>\n<\/ul>\n<p id=\"\">Furthermore, a criterion based on a specific <em id=\"\">field<\/em> from the linked collection can be created. The category of the criterion relies on the kind of the Collection field.<\/p>\n<h4 id=\"\">Illustration: A criterion centered<\/p>\n<h4>on a pasture from a alluded set<\/h4>\n<p id=\"\">In this instance, we possess a Collection list linked to an &#8220;Events&#8221; assortment. The \u201cEvents\u201d Array points to a \u201cLocations\u201d selection.<\/p>\n<p id=\"\">Within this Collection list associated with the \u201cEvents\u201d assortment, we hold various field qualities from the &#8220;Locations&#8221; Assortment connected to textual fragments. We&#8217;ve appended designations for each attribute we want to portray (for instance, &#8220;Date&#8221;, &#8220;City&#8221;, etc.). The designations and the attributes possess a <strong id=\"\">presentation<\/strong> configured to <strong id=\"\">inline<\/strong> so they materialize adjacent to each other.<\/p>\n<p id=\"\">We can establish circumstantial perceptibility on a textual piece so it only emerges when the attribute is designated in the Compilation item:<\/p>\n<ol id=\"\">\n<li id=\"\">Pick the <strong id=\"\">textual piece<\/strong> (e.g., &#8220;City&#8221;)<\/li>\n<li id=\"\">Unlatch <strong id=\"\">Element settings panel<\/strong> &gt; <strong id=\"\">Circumstantial perceptibility<\/strong><\/li>\n<li id=\"\">Tap the \u201c<strong id=\"\">plus<\/strong>\u201d symbol to the right of \u201c<strong id=\"\">Conditions<\/strong>\u201d<\/li>\n<li id=\"\">Determine the field from the <em id=\"\">alluded<\/em> assortment in the initial dropdown \u2014 for this illustration that would be <strong id=\"\">City (Location)<\/strong><\/li>\n<li id=\"\">Opt for <strong id=\"\">Is set <\/strong>within the secondary dropdown<\/li>\n<li id=\"\"><strong id=\"\">Conserve<\/strong> the stipulation<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1c7_62e951955b1be569b8fd142a_fzsxs0jpof-yycv9hw7egfad_i_adsultyvfynr7jbwqxkuqd_fz_uge2etn4b4mpnnfcr4d1hnfilqp4xt_kiip6np2in_1ly-h8lurmencwf-6ofd4ojqmfz_stz0rg9mfmcsaftgcnniq3mnzlw.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A condition is added so that the text block element is visible when City (Location) is set.\" title=\"64b94acf88e862578c19b1c7_62e951955b1be569b8fd142a_fzsxs0jpof-yycv9hw7egfad_i_adsultyvfynr7jbwqxkuqd_fz_uge2etn4b4mpnnfcr4d1hnfilqp4xt_kiip6np2in_1ly-h8lurmencwf-6ofd4ojqmfz_stz0rg9mfmcsaftgcnniq3mnzlw\">\n<\/div>\n<\/figure>\n<p id=\"\">Within this illustration, we further possess a \u201cMap link\u201d which we wish to have accessible to website visitors when they hit the city denomination. To achieve that, we&#8217;re employing a <strong id=\"\">Text link<\/strong> that withdraws the text from the &#8220;<strong id=\"\">City<\/strong>&#8220;field and the URL from the &#8220;<strong id=\"\">Map link<\/strong>&#8220;field.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1bb_62e95195b874e9c0f71705d1_ytjpkadj-hc7d5exp4oxlujuo2q9tmmrmzz03dxsltgcv2bcq53cpirpmdls0ehmf50hufe-xfbhdtpzh6kksc5k8qzmhu669_ifz7bfr6seknvyqshfzt_f0xzgznhj_3jvxn65ebu1fwzj6b4oom.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A text link pulls the URL from the \u201cMap link\u201d field and the text from the \u201cCity\u201d field. Both fields are linked to the \u201cEvents\u201d Collection.\" title=\"64b94acf88e862578c19b1bb_62e95195b874e9c0f71705d1_ytjpkadj-hc7d5exp4oxlujuo2q9tmmrmzz03dxsltgcv2bcq53cpirpmdls0ehmf50hufe-xfbhdtpzh6kksc5k8qzmhu669_ifz7bfr6seknvyqshfzt_f0xzgznhj_3jvxn65ebu1fwzj6b4oom\">\n<\/div>\n<\/figure>\n<p id=\"\">If some locations don\u2019t possess a map link, we wouldn\u2019t like to exhibit a text link when there isn&#8217;t a link to proceed to. In such a scenario, we can utilize conditional visibility.\u00a0<\/p>\n<p id=\"\">We can append a <strong id=\"\">stipulation<\/strong> to this <strong id=\"\">Text link<\/strong> so it displays solely when the &#8220;<strong id=\"\">Map link<\/strong>&#8220;field of the alluded &#8220;Locations&#8221; Assortment <strong id=\"\">Is set<\/strong> (e.g., when a map link has been added to the Compilation item).<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1ca_62e951965f4f2a9cddb24e26_6678maisfsgyymszh86i7vcin8k_l41cdueqohzzplpbhmrh7vz8o_6r1r0-yojv_rdfk0cg7edizfdszwlzxdwcbjukimi9f4w-smub7dcsu-wwpor7oizoigb_pfk8rzpv3hnmncmwtfxlobkua.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A condition is set so that the text link is visible only when the \u201cMap link (Location)\u201d is set.\" title=\"64b94acf88e862578c19b1ca_62e951965f4f2a9cddb24e26_6678maisfsgyymszh86i7vcin8k_l41cdueqohzzplpbhmrh7vz8o_6r1r0-yojv_rdfk0cg7edizfdszwlzxdwcbjukimi9f4w-smub7dcsu-wwpor7oizoigb_pfk8rzpv3hnmncmwtfxlobkua\">\n<\/div>\n<\/figure>\n<p id=\"\">Next, we can attach a <strong id=\"\">Text block<\/strong> (rather than a <strong id=\"\">Text link<\/strong>) and link it to the \u201cCity\u201d attribute. Subsequently, we can configure a <strong id=\"\">stipulation<\/strong> of this <strong id=\"\">Text block <\/strong>for when the &#8220;<strong id=\"\">Map link<\/strong>&#8221; field <strong id=\"\">Is not set. <\/strong>This method, merely the city title (devoid of a link) will be visible when there isn&#8217;t a \u201cMap link\u201d configured in the \u201cLocations\u201d Compilation item.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1cf_62e9519682a2d1ad57ae6766_rov4v9spzh_cn-z1xmblb3nmuogxz0ystn223vta44b00nskylu5oizz2cjhmmjh69z0-0zg62n5ug53whkadutfyqf32encxbsimb1fbufczxqnndh7thzhxlga7k6acsj4r2msmynh08yj3oag5q.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A condition is set so that the text block is visible when the \u201cMap link (Location)\u201d is not set.\" title=\"64b94acf88e862578c19b1cf_62e9519682a2d1ad57ae6766_rov4v9spzh_cn-z1xmblb3nmuogxz0ystn223vta44b00nskylu5oizz2cjhmmjh69z0-0zg62n5ug53whkadutfyqf32encxbsimb1fbufczxqnndh7thzhxlga7k6acsj4r2msmynh08yj3oag5q\">\n<\/div>\n<\/figure>\n<p id=\"\">To assure the <strong id=\"\">Text block<\/strong> is inline with the label, you can include a class to it and configure the <strong id=\"\">presentation<\/strong> to <strong id=\"\">inline<\/strong>.<\/p>\n<h4>Instance: A condition grounded on an alluded attribute<\/h4>\n<p id=\"\">We\u2019ve appended all these location-connected designations and attributes within a div block, which we styled beneath the class name \u201cLocation details.\u201d Leveraging circumscribed visibility, we can guarantee this <em id=\"\">complete<\/em> div block only manifests when the \u201cLocation\u201d reference attribute is designated for each event in the \u201cEvents\u201d Assortment. To achieve this:<\/p>\n<ol id=\"\">\n<li id=\"\">Select the \u201cLocation details\u201d <strong id=\"\">div block<\/strong><\/li>\n<li id=\"\">Unlatch <strong id=\"\">Element settings panel <\/strong>&gt; <strong id=\"\">Circumstantial visibility<\/strong><\/li>\n<li id=\"\">Tap the \u201c<strong id=\"\">plus<\/strong>\u201d symbol to the right of \u201c<strong id=\"\">Conditions<\/strong>\u201d<\/li>\n<li id=\"\">Opt for your reference attribute (e.g.,<strong id=\"\">\u201c<\/strong>Location (Reference)\u201d) in the primary dropdown<\/li>\n<li id=\"\">Choose <strong id=\"\">Is set<\/strong> within the secondary dropdown<\/li>\n<li id=\"\"><strong id=\"\">Conserve<\/strong> the stipulation<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94acf88e862578c19b1d2_62e95196b036cbe9f8558338_ivdumt8-degbbrgwy9t-txbink3n3yrljicy4nqhhqjenfloiqfoxklfuwzpe-6h2qz8kor-dvdcguy18e-_m9ktc-3gu-qtrn4u8febmgfu5urtfaq2-l6gmmnwr3yhwx0tvyxt_7v64sgml-zt8q.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"A condition is added so that the div block is visible when \u201cLocation (Reference)\u201d is set.\" title=\"64b94acf88e862578c19b1d2_62e95196b036cbe9f8558338_ivdumt8-degbbrgwy9t-txbink3n3yrljicy4nqhhqjenfloiqfoxklfuwzpe-6h2qz8kor-dvdcguy18e-_m9ktc-3gu-qtrn4u8febmgfu5urtfaq2-l6gmmnwr3yhwx0tvyxt_7v64sgml-zt8q\">\n<\/div>\n<\/figure>\n<h6 id=\"\"><strong id=\"\">Note: <\/strong>The reference attribute cannot be utilized for sorting.<\/h6>\n","protected":false},"excerpt":{"rendered":"Use reference fields to connect items from different Collections.","protected":false},"author":2,"featured_media":4565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-4564","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4564"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4564\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4565"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}