ヘルプセンター
    ヘルプセンター
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. 高度なCMS機能
    5. CMS：ライブ・サイトからコレクション・コンテンツを管理

CMS：ライブ・サイトからコレクション・コンテンツを管理

20 min read
Manage your collection content directly from your live site by creating custom forms with input elements. This allows you to gather and update information from your site visitors on the fly. By doing so, you can keep your site content fresh and relevant without needing to access the backend.

For example, if you manage a real estate website, you can let agents submit and edit property listings directly on the site. This streamlines the process of updating property information and ensures that your listings are always current and accurate.

Start by creating a form with input elements to collect content from visitors. Connect these elements to your collection, set up interactive buttons for actions like submitting or deleting data, and optionally add tables or filters to enhance the user experience.
Using the Studio Editor?
  • We've simplified this process in the Studio Editor where you can add a dynamic manage item page. The dynamic manage page includes a pre-built page that allows collaborators and site members to manage collection content from your live site.
  • You can also use Velo by Wix to streamline the process of creating content in your collection. Learn how to build a members area where visitors can easily view and update their personal profiles anytime.
A screenshot of a form where visitors can add, delete, or update entries.
始める前に

Step 1 | Create a form with input elements

Build custom forms for your site's specific needs by adding input elements to your site. The elements used to make up your form accept content such as text and file uploads from visitors. Your collection saves the content submitted through the form. Learn more about creating a form with user input elements.
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. Go to the page or section where you want to create a custom form. 
  3. クリック エレメントの追加  エディターの左側にある
  4. Click Input.
  5. Click the type of input element you want to add.
  6. Click and drag the relevant input element onto the page. 
Screenshot of adding input elements in the Wix Editor.
  1. Click the input element you added and select Settings.
  2. Fill out the settings. The options vary depending on which input element you selected.
  3. (オプション レイアウト  そして Design icons to change the layout or design.
  4. Repeat steps 3-9 above to add as many input elements as your form needs. 

Step 2 | Connect the input elements to your collection

Connect the input elements to a dataset that connects to the collection you want visitors to edit from the live site. Set the dataset mode that determines whether the dataset can read content from the collection, write content to the collection, or both. Then set the collection permissions that control which roles can view, add, update, and delete collection content. 
Wixエディター
スタジオエディター
  1. In your editor, click any of the input elements you just added. 
  2. をクリックする。 CMSへの接続 アイコン .
  3. Connect the element to a dataset that binds to the collection you want to manage on the live site:
    1. (If necessary) Select Collect content in the panel on the right. 
      Tip: If you haven't added a dataset to the page yet, add a dataset first (see the next step) then select Collect content. 
    2. Click the Choose a dataset drop-down and select a dataset that connects to the collection you want to manage on the live site. 
      Note: If your page does not have a dataset yet, click + Add a Dataset to add one. 
    3. Click the Value connects to drop-down and select the field you want the input to submit to. The field type determines what kind of data you can store in the field. 
      Tip: To add and connect a new collection field, select Add new field, enter a name for the field, choose the field type, and click Add. 
  4. Set the dataset mode and collection permissions:
    1. Click Dataset Settings. 
    2. をクリックする。 データセット・モード drop-down and choose an option:
      • Write: The dataset can modify collection content, but cannot read content from it to show the content on the connected elements. 
      • Read & Write: The dataset can modify the collection content and read it to show it in the connected elements. 
    3. Click the permissions type next to Permissions to edit the collection permissions. 
    4. Select Custom. 
    5. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site:
      • Admin: Site owners and collaborators always have view, add, update, and delete permissions from the live site. You cannot change the permissions associated with this admin role. 
      • Item's creator: This role's permissions only apply to the specific items that a member creates themselves. For example, the item's creator can only view, add, update, or delete collection items they created.
      • Members only: This role applies to members of your site only. Selecting a permission for this role also selects the permission for the "Item's creator" role. 
      • Everyone: This role applies to everyone who can access your live site. Selecting a permission for this role also selects the permission for the "Members only" and "Item's creator" role. 
    6. 保存をクリックする。 
Screenshot of setting custom collection permissions.
  1. Click Back to element at the top of the dataset settings panel to return to the element's connection options. 
  2. (Dropdown and Selection Tags elements only) Choose how you want to manage the choices that visitors can select from in the element: 
    1. をクリックする。 Show options from a collection toggle to choose where to manage the element's choices: 
      • Enabled: Use another CMS collection field for the choices. Connect the relevant dataset and choose the fields to use from the Labels and values connect to drop-down.
      • Disabled: Click Manage Choices on the input element to set up the options visitors can select. Learn more about connecting Dropdown input elements or Selection Tags. 
    2. (If enabled) For the collection you are using to display the options, set the dataset mode and collection permissions: 
      1. Click Dataset Settings under the dataset that connects the list options. 
      2. Click the Dataset mode drop-down and choose an option:
      • Read: The dataset can read the collection content to show it on the connected elements. 
      • Read & Write: The dataset can modify the collection content and read it to show it in the connected elements.
    3. Click the permissions type next to Permissions to edit the collection permissions.
    4. Select the relevant permissions that allow the relevant people to view, add, update, or delete content in the collection. Then click Save. Learn more about setting your collection permissions.  
Screenshot of connecting a dropdown input's options from a collection.
  1. Repeat these steps for each of your custom form's input elements. 

Step 3 | Add and set up interactive buttons

After visitors make selections in the input elements, they need to click a separate button to submit the data. Create a 'Submit' button by connecting it to the dataset that connects to the collection being edited. Then set the button's click action to 'Submit'. 

You can add other buttons for specific editing actions such as creating new items, reverting selections, or deleting items. To let visitors cycle through the displayed items, you could add navigational 'Next / Previous item' buttons. Learn more about the various dataset click actions you can set for buttons or images. 
Wixエディター
スタジオエディター
  1. クリック エレメントの追加  エディターの左側にある
  2. Click Button.
  3. Click and drag the button you want to use as your submit button onto the page. You can use any of the following button types: Themed Buttons, Text & Icon Buttons, Icon Buttons, or Image Buttons.
    Tip: Alternatively, you can add an image and use it as your submit button. 
A screenshot of adding a button to use as the submit button.
  1. Click Change Text & Icon and enter the text you want to display on the button (e.g. "Submit"). 
  2. をクリックする。 CMSへの接続 アイコン .
  3. Click the Choose a dataset drop-down and select the dataset connected to your submissions collection. 
  4. Click the Click action connects to drop-down and select Submit. 
  5. (Optional) Add success and failure messages that appear when submissions are submitted successfully or unsuccessfully:
    1. Click + Add success message then click + Add failure message.
    2. Click and drag both messages to the place where you want them to appear. They can overlap because the messages do not display at the same time.
    3. Click Edit Text on each message to edit the messages.
  6. Select the button and click the CMSへの接続 アイコン . Then click the When successful, navigate to drop-down, and select an option:
    • Stay on this page: The visitor stays on the same page after submitting the form.
    • A link: The visitor is redirected to another page after submitting the form. Click Choose under Choose a link and set up the link. 
Screenshot of adding a submit button.
  1. ボタンをクリックして Design アイコン  to customize the appearance of your submit button. 
  2. Add more interactive or navigational buttons: 
    1. Repeat steps 1-3 above to add more buttons. 
    2. Select the relevant button and click the CMSへの接続 アイコン .
    3. Click the Choose a dataset drop-down and select the dataset that connects to the collection you want visitors to be able to edit. 
    4. Click the Click action connects to drop-down and choose the click action you would like the button to have (e.g. New, Revert, Delete). Learn more about all the available dataset click actions. 
    5. Repeat these steps for each interactive button you need. 
    6. Customize each button's design, layout, and settings. 
Screenshot of setting a button's click action to Delete.

Step 4 | (Optional) Add a table to select and edit specific items

You can add a table that displays the collection content visitors will edit. Visitors can click in the table to select the item they want to edit, then use the input elements and interactive buttons to add or update the content. 

Alternatively, you could add text and images and connect them to the same dataset as your inputs. As visitors click your navigational buttons to cycle through the items, the connected text and images will dynamically adjust to show the content the visitor is editing. 
A screenshot of a form that includes a table for selecting collection items to update or delete.
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. クリック エレメントの追加  エディターの左側にある
  3. Click List.
  4. Click Tables.
  5. Click and drag the table you want to use onto the page. 
A screenshot of adding a table in the Wix Editor.
  1. をクリックする。 CMSへの接続 アイコン .
  2. Click the Choose a dataset drop-down and select the dataset that your input elements also connect to. 
  3. Click the relevant drop-downs under Connections to choose which collection fields connect to each column. 
  4. Customize your table.
  5. Publish your site if you're ready to make the changes go live.

Step 5 | (Optional) Add a filter to only show members items they created

You could set up the page so that everyone can view the collection items, but when site members log in, they can only view and update items they created themselves. That way, when site members log in to update their own data, they won't have to scroll through all the items created by other members. 

To do so, add a dataset filter for the Owner (Text) field set to is logged in. You should also set the following custom collection permissions:
  • View: Everyone
  • Add: Member's only 
  • Update: Item's creator
  • Delete: Item's creator or Admin (depending on who you want to be able to delete the items)
A screenshot of custom collection permissions.
重要だ：
The Owner (Text) field is only available as a dataset filter on regular datasets. Dynamic page datasets do not have this option. If you want to use this feature on a dynamic page, you can add a regular dataset to the page and connect it to the relevant elements. Then, add the Owner (Text) field dataset filter to this regular dataset. 
Wixエディター
スタジオエディター
  1. Go to the relevant page in your editor.
  2. Go to the relevant dataset settings:
    1. クリック CMS  左側 
    2. Click Manage Page Connections.
    3. をクリックする。 その他のアクション アイコン  next to the relevant dataset and select Dataset settings. 
  3. Click + Add Filter under Filter. 
  4. Click the Field drop-down and select the Owner (Text) field at the bottom of the list. 
  5. Leave the Condition set to is and the Status set to logged in and click Add Filter. 
Screenshot of adding a dataset filter for the Owner field.
  1. If needed, edit the collection permissions: 
    1. Click the permission type next to Permissions in the dataset settings. 
    2. Select Custom.
    3. Click the relevant checkboxes next to each role to choose whether visitors with the role can view, add, update, or delete collection content from the live site. 
    4. 保存をクリックする。
  2. Publish your site when you are ready to make the changes go live. 

これは役に立ったか？

|

この記事では

  • Step 1 | Create a form with input elements
  • Step 2 | Connect the input elements to your collection
  • Step 3 | Add and set up interactive buttons
  • Step 4 | (Optional) Add a table to select and edit specific items
  • Step 5 | (Optional) Add a filter to only show members items they created

関連コンテンツ

CMS: About Collection Permissions
CMS：データセットの追加と設定
CMS：ユーザー入力要素について
CMS：データセットについて

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。
マッチング