Customize existing widgets

JasonBOCQUET — Wed, 28 Aug 2024 11:29:01 GMT

Hi community,

I want to modify the existing filter widget but i'm encountering a problem.

in the "widget.tsx" file there is this code who manage the position of the reset filter button :

showResetAtBottom = (resetAll, arrangeType, wrap, filterItems): boolean => { let atBottom = true if ( resetAll && arrangeType === FilterArrangeType.Inline && !wrap && (filterItems.length > 1 || (filterItems.length === 1 && getShownClauseNumberByExpression(filterItems[0].sqlExprObj) === 0)) ) { atBottom = false } return atBottom } getItemUseDs = (item: filterItemConfig) => { let useDs = item.useDataSources[0] if (item.isGroup && item.sqlExprObjForGroup) { useDs = item.useDataSources.filter(ds => ds.dataSourceId === item.sqlExprObjForGroup[0].dataSourceId)[0] } return useDs } getFilterItems = (config, arrangeType = FilterArrangeType.Block, wrap = false, isPopup = false) => { const showResetAtBottom = this.showResetAtBottom(config.resetAll, arrangeType, wrap, config.filterItems) return ( <div className={classNames('w-100 h-100 d-flex justify-content-between', showResetAtBottom ? 'flex-column' : 'flex-row')} css={getStyles(this.props.theme, this.props.config)}> <div className={classNames('w-100 filter-items-container', arrangeType && config.arrangeType === FilterArrangeType.Inline ? 'filter-items-inline' : '', wrap ? 'filter-items-wrap' : '', isPopup ? 'filter-items-popup' : '')} > {(this.state.filterItems as unknown as filterItemConfig[]).map((item, index) => { const useDs = this.getItemUseDs(item) const ds = this.isDataSourceRemoved(useDs.dataSourceId) ? null : this.state.dataSources[useDs.dataSourceId] const isNotReadyFromWidget = this.state.outputDataSourceIsNotReady[useDs.dataSourceId] return ( <FilterItem key={index} id={index} widgetId={this.props.id} intl={this.props.intl} selectedDs={ds} useDataSource={useDs} isNotReadyFromWidget={isNotReadyFromWidget} logicalOperator={config.logicalOperator} config={item} arrangeType={arrangeType} triggerType={config.triggerType} wrap={wrap} omitInternalStyle={config.omitInternalStyle} filterNum={this.state.filterItems.length} onChange={this.onFilterItemChange} itemBgColor={this.props.theme.ref.palette.neutral[400]} theme={this.props.theme} /> ) })} </div> { config.resetAll && <div className={classNames('filter-reset-container', showResetAtBottom ? 'bottom-reset' : 'right-reset')}> <Button icon type='default' size='default' className='reset-button' style={{ borderRadius: config.triggerType === FilterTriggerType.Toggle ? '16px' : null }} title={this.props.intl.formatMessage({ id: 'resetAllFilters', defaultMessage: jimuUIMessages.resetAllFilters })} aria-label={this.props.intl.formatMessage({ id: 'resetAllFilters', defaultMessage: jimuUIMessages.resetAllFilters })} onClick={this.onResetChange} > <ResetOutlined /> </Button> </div> } </div> ) }

My question here is simple : how can I move the button to integrate on the filter dialog box ? I don't want to have this button outside of the dialog box because it consume to much space if I use multiple filter widget.

topic Customize existing widgets in ArcGIS Experience Builder Questions

Customize existing widgets